form在submit时disabled=“true”后的处理

最新推荐文章于 2024-05-08 12:00:08 发布
原创 最新推荐文章于 2024-05-08 12:00:08 发布 · 2.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了如何使用document.all获取页面上独一无二的元素属性，并通过disable属性控制表单提交键，在用户提交请求时避免意外操作。同时，提供了解决方法确保在禁用提交键后仍能正常提交。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.页面只要有唯独 的属性值id property等都可以用document.all.（该属性值）获得才元素；

如：document.all.clearButton.disabled ="ture";            其中clearButton就是属性值，该值在该页面是独一的。

2.<form>中如果submit点下去以后，页面需要长时间的等待，为了防止在等待的时候客户点击其他的提交键错乱页面，可以用disable="true"进行控制这些提交键，这样一来就控制了页面的稳定，但是可能会造成submit无法提交，因为你刚刚已经将提交键给disable了，解决办法：在最后加上一句：document.forms[0].submit();其他写法也可以，这样就两者兼顾了。

form.submit()提交后返回数据的处理
weixin_30455023的博客
05-27 4508
form.submit()发送请求一般是单向的，如果需要取返回的数据，一般会发送ajax请求，但是如果form中有附件呢？（以后有时间给大家分享ajax上传附件的功能），确实需要返回数据来知道该功能是否执行成功呢？我的解决方法是在form中增加一个target属性，让其返回的数据添加到一个隐藏的iframe的控件中，返回的数据 <label for="a"> 上传附...
利用disabled=true，使提交按钮变成灰色，不能提交
whjwhja6的专栏
11-06 2万+
验证用户是否正确，错误的话，会在用户名后显示用户名错误，并利用disabled=true，使提交按钮变成灰色，不能提交，正确的话，disabled=false（提交按钮不变色，可用） 步骤：先建立一个登陆表单，在用户名失焦时调用checkUser()函数，验证用户名是否等于csdn（csdn是定义的，并不是从数据库中获取的），用户名后还有个图层，会显示是否用户名正确 1、index.htm
disabled="true"
活在当下
10-29 5849
注意区分下面两种状态： disabled="true" 不可用; 后台读值会不能读取。 readonly="true" 只读
disabled=“true“是什么意思？
weixin_44928129的博客
02-20 1936
disabled="true"是什么意思？
disabled=true处理
yoloo
10-22 5927
disabled=true   是把这个元素禁用了,如果你不想让别人操作这个元素,又想取到值,可以让他readonly=true,这样就是只读的了.后台也可以取到值. 或者你可以用一个隐藏字段      ...
form内submit按钮的disabled失效?
qq_40457310的博客
02-06 4611
在写表单时经常会为了防止多次提交, 而加入提交按钮一次点击后失效的功能, 但是新手的话有一点小问题要注意 比如下面的例子: <form id='form1'> <input type='text' name='content' /> <button type='submit' name='sub-btn'>Submit</button> </form>var form1 = docuemnt.get
<el-form :rules="formRules" :model="pageModel.form" label-width="120px" size="small" class="el-form-container "> <el-form-item label="姓名" prop="policeName" class="content"> <el-input v-model.trim="pageModel.form.policeName" :disabled="pageModel.pageInfo.formConfig.type == '2' " @compositionstart="isComposing = true" @compositionend="handleCompositionEnd" /> </el-form-item> <el-form-item label="性别" prop="sex" class="content" v-if="pageModel.pageInfo.environmentShow === true"> <el-select v-model="pageModel.form.sex" placeholder="请选择" style="width: 100%" :disabled="pageModel.pageInfo.formConfig.type == '2' "> <el-option v-for="(item, index) in pageModel.pageInfo .sexType" :key="index" :label="item.dictLabel" :value="item.dictValue"> </el-option> </el-select> </el-form-item> <el-form-item label="身份证号" prop="idCard" class="content" v-if="pageModel.pageInfo.environmentShow === true"> <el-input v-model="pageModel.form.idCard" :disabled="pageModel.pageInfo.formConfig.type == '2' " /> </el-form-item> <el-form-item label="所属单位" prop="deptId" class="content"> <el-cascader :options="pageModel.listDept" v-model="pageModel.form.deptId" :props="{ children: 'children', label: 'deptName', value: 'deptId', checkStrictly: true, }" style="width: 100%" @change="changeHandel" :disabled="pageModel.pageInfo.formConfig.type == '2' " clearable /> </el-form-item> <el-form-item label="警号" prop="policeCode" class="content"> <el-input v-model="pageModel.form.policeCode" :disabled="pageModel.pageInfo.formConfig.type == '2' " onkeyup="this.value=this.value.replace(/[^\w_]/g,'')" /> </el-form-item> <el-form-item label="警种" prop="policeType" class="content"> <el-input v-model="pageModel.form.policeType" :disabled="pageModel.pageInfo.formConfig.type == '2' " /> </el-form-item> <el-form-item label="接入方式" prop="pattern" class="content"> <el-select v-model="pageModel.form.pattern" placeholder="请选择" style="width: 100%" :disabled="pageModel.pageInfo.formConfig.type == '2' "> <el-option v-for="(item, index) in pageModel.pageInfo .type" :key="index" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item label="单位信息" prop="shortName" class="content"> <el-input v-model="pageModel.form.shortName" :disabled="pageModel.pageInfo.formConfig.type == '2' " /> </el-form-item> <el-form-item label="职务" prop="post" class="content" v-if="pageModel.pageInfo.environmentShow === true"> <el-input v-model="pageModel.form.post" :disabled="pageModel.pageInfo.formConfig.type == '2' " /> </el-form-item> <el-form-item label="手机号" prop="phone" class="content" v-if="pageModel.pageInfo.environmentShow === true"> <el-input v-model="pageModel.form.phone" :disabled="pageModel.pageInfo.formConfig.type == '2' " /> </el-form-item> <el-form-item label="邮箱" prop="email" class="content" v-if="pageModel.pageInfo.environmentShow === true"> <el-input v-model="pageModel.form.email" :disabled="pageModel.pageInfo.formConfig.type == '2' " /> </el-form-item> <el-form-item label="头像" prop="userPic" class="content flex-container" v-if="pageModel.pageInfo.environmentShow === true"> <img class="tx" v-if="pageModel.pageInfo.formConfig.type == '2'" :src="pageModel.form.userPic" alt="" /> <el-upload class="upload-demo" action="" v-else v-model="pageModel.form.userPic" :http-request="uploadActionHandle" :before-upload="beforeAvatarUpload" :before-remove="beforeDeleteImage" :on-remove="deleteImageHandel" :file-list="pageModel.pageInfo.imageList" list-type="picture"> <el-button size="small" type="primary">点击上传 </el-button> </el-upload> </el-form-item> <el-form-item label="备注" prop="remark" class="content flex-container" v-if="pageModel.pageInfo.environmentShow === true"> <el-input v-model="pageModel.form.remark" :disabled="pageModel.pageInfo.formConfig.type == '2' " type="textarea" :rows="3" /> </el-form-item>/** createBy: muyufei time: 2023-10-16 10:20:03 des: 提交form校验规则 */ export const formRules = { policeName: [ {required: true, message: '姓名不能为空', trigger: 'blur'} ], policeCode: [ {required: true, message: '警号不能为空', trigger: 'blur'} ], deptId: [ {required: true, message: '所属单位不能为空', trigger: 'change'} ] }
最新发布
07-29
- **触发校验**：通过 `el-form` 的 `validate` 方法提交时触发校验（例如 `@submit.native.prevent="handleSubmit"`）。 示例代码： ```vue <el-form :model="formData" :rules="rules" ref="formRef"> <el-...
<button class="loginBtn" size="{{primarySize}}" form-type='submit' disabled='{{disabled}}'>登录</button>
06-11
该按钮还有一个size属性，其值为primarySize，...另外，该按钮还有一个form-type属性，它的值是submit，表示该按钮用于提交表单。最后，该按钮还有一个disabled属性，当该属性的值为true时，按钮会被禁用，不能被点击。
父组件里<form @submit.prevent="submitForm">子组件const emit = defineEmits([‘update:modelValue’])换一种写法
07-17
但是注意：题目中父组件有`<form @submit.prevent="submitForm">`，而子组件中原本是通过emit来更新值的，现在我们要换一种写法。 我们可以这样调整： - 子组件不再使用`defineEmits`来定义`update:modelValue`...
给表单添加:disabled="true"不生效
06-03
如果你在 Ant Design Vue 表单上添加了 `:disabled...在上面的示例中，我们将 `a-input` 控件的 `:disabled` 属性设置为 `true`，同时将 `a-form` 控件的 `:disabled` 属性也设置为 `true`，这样就可以禁用整个表单了。
function submitForm() { const phone = phoneNumberInput.value; if (!phone) { alert('请输入手机号码'); return; } submitBtn.disabled = true; axios.post(API_URL, { phone }) .then(() => { alert('提交成功'); }) .catch(() => { alert('提交失败'); }) .finally(() => { submitBtn.disabled = false; }); }。优化这个代码，使得代码的alert输出能够在移动端显示
05-28
function submitForm() { const phone = phoneNumberInput.value; if (!phone) { Swal.fire('请输入手机号码'); return; } submitBtn.disabled = true; axios.post(API_URL, { phone }) .then(() => { Swal...
html form提交结果处理,form.submit()提交后返回数据的处理
weixin_39846553的博客
06-17 4091
form.submit()发送请求一般是单向的，如果需要取返回的数据，一般会发送ajax请求，但是如果form中有附件呢？(以后有时间给大家分享ajax上传附件的功能)，确实需要返回数据来知道该功能是否执行成功呢？我的解决方法是在form中增加一个target属性，让其返回的数据添加到一个隐藏的iframe的控件中，返回的数据 上传附件 以下是返回页面中后台返回数据的处理try {var dat...
标签中disable=“true“设定问题
weixin_45945642的博客
02-22 448
如果在标签中disabled=“true”，标签中的值无法传递到form，修改方案disabled=“disabled” 或js取得值，用inputhidden输入
form 表单提交、后台的统一处理
羽渡尘的博客
03-26 1058
配合 form 提交后台 /ajaxSubmit/Submit等通过form提交。
html form表单提交后处理返回数据
qq_31864971的博客
01-22 9438
本文转载自:https://www.cnblogs.com/peng14/p/5025692.html 上传如果通过form提交并且需要处理返回值。（其实用ajax上传方式刚好，看需要） 可以这么做： &lt;form id="importBookForm" action="uploadReadBook.action" encType="multipart/form-data" method...
input上添加disabled=“true“，点击事件失效处理办法
m0_67624022的博客
05-08 1414
给input标签添加样式style="pointer-events: none;
form表单submit提交后不跳转页面，且能捕获返回信息
mm_hello11的博客
06-28 1634
【代码】form表单submit提交后不跳转页面，且能捕获返回信息。
表单Submit之后获得后台响应
疯狂de小酱油
03-18 2732
第一种方式:页面初始化时直接绑定Validform $(function(){         //部门编辑表单校验         $(".main_content form:first").Validform({                         tiptype:3,                         ajaxPost:true,            
提交Form表单,submit之前做js判断处理
热门推荐
迟迟 优快云
03-23 3万+
效果:在点击提交按钮时,首先进行js判断, 如果不符合条件,则alert出提示信息,并return false.主要点就在于给form表单添加一个onsubmit事件. 在onsubmit事件中定义的函数里进行js验证处理.代码 : &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值