`

input disabled不能提交表单

 
阅读更多

今天,在开发过程中发现一个问题,在提交form表单时,有一个input一直不能被提交,后台一直报错!究其原因,是因为该input上设置了disabled属性。然而,有时我们又不得不设置某些元素为不可操作的,建议使用readonly替之。

一、readonly & disabled区别

readonly和disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容。
disabled:对于所有的表单元素都有效,包括select, radio, checkbox, button等。如果一个输入项的disabled设为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效,最重要的一点是当提交表单时,这个表单输入项将不会被提交。
readonly:只针对input(text / password)和textarea有效;如果设为true,用户只是不能编辑对应的文本,但是仍然可以聚焦焦点,并且在提交表单的时候,该输入项会作为form的一项提交。

二、常用的情况

1. 在某个表单中为用户预填了某个唯一识别代码,不允许用户改动,但是在提交时需要传递该值,此时应该将它的属性设置为readonly。
2. 经常遇到当用户正式提交了表单后需要等待管理员的信息验证,这就不允许用户再更改表单中的数据,而是只能够查看,由于disabled的作用元素范围大,所以此时应该使用disabled,但同时应该注意的是要将submit button也disabled掉,否则只要用户按了这个按钮,如果在数据库操作页面中没有做完整性检测的话,数据库中的值就会被清除。
如果说在这种情况下用readonly来代替disabled的话,若表单中只有input(text/password)和textarea元素,那还是可以的,如果存在其他发元素,比如select,用户可以在重新改写值后按回车键进行提交(回车是默认的submit触发按键)。

三、小技巧

1. diabled可用readonly代替,background-color:#cccccc;加上灰色背景色就可以。

2. disabled和readonly的文本输入框只能通过脚本进行修改value属性。

分享到:
评论

相关推荐

    form表单中的Input使用disabled不能提交的解决方法

    根据提供的资料,解决问题的关键在于,当遇到使用disabled属性导致表单不能提交的情况时,可以采取以下步骤:首先,在表单提交的事件处理函数中,临时将disabled属性移除,使得表单提交时包含该字段的值。...

    html form表单input使用disabled后提交不能获取表单值的解决方法

    form表单输入框input设置disable属性提交后,得不到该输入框的值,解决该类问题可以参考下面两个方法: 方法一: 使用readonly带替代disabled,即把 disabled="disabled" 修改为 readonly="readonly" 二者区别: ...

    input为disabled提交后得不到该值的解决方法

    标题和描述提到的问题核心在于,`disabled` 属性的`input`字段在提交表单时不会包含其值,而`readonly`则可以。 `disabled` 属性: - 当一个`input`字段设置为`disabled`时,用户无法编辑该字段的值。 - 这样的字段...

    jQuery实现提交表单时不提交隐藏div中input的方法

    在本例中,我们探讨的是如何使用jQuery来实现一个特定的功能:在提交表单时,不包括隐藏div中的input元素的值。这是因为通常情况下,表单在提交时会包含所有可见或不可见的input元素的值,而我们有时希望隐藏部分...

    Ant design vue 的组件禁用属性 disabled.pdf

    禁用状态通常用于表示组件处于不可操作或非活动状态,这在许多场景下都是必要的,比如表单提交前的验证过程、展示只读信息或者在某些条件未满足时阻止用户输入。 `disabled`属性适用于多种组件,包括日期选择器...

    js实现定时提交表单

    在在线考试系统中,定时提交表单是一个关键功能,它确保考生在规定时间结束后自动提交试卷,防止作弊并保证考试公平性。下面将详细介绍如何使用JavaScript实现定时提交表单的功能。 首先,我们需要理解表单(Form)...

    Web表单提交之disabled问题js解决方法

    Web表单提交时,输入框的disabled属性使得输入框的值不能被提交到服务器端。为了能够在不改变用户界面的情况下,将输入框的值传递给服务器,我们通常需要使用JavaScript进行一些操作。 ###知识点一:disabled属性的...

    Vue动态控制input的disabled属性的方法

    有时候会有这样的需求,新增的时候可以输入,但是无法修改,此时就需要通过控制input标签的disabled属性来实现,那vue是如何动态设置input输入框的disabled属性的呢? 输入框的html源代码 配置项 v-bind:disabled=...

    通过disabled和readonly将input设置为只读效果

    在HTML表单设计中,有时候我们需要用户只能查看输入框(input)中的内容而不能修改,这时我们可以使用`disabled`和`readonly`属性来实现只读效果。这两种属性虽然都能达到表面的只读目的,但它们在功能上存在显著...

    基于js disabled="false"不起作用的解决办法

    在JavaScript中,可以通过DOM的属性来控制表单元素的disabled状态,从而使得某个输入框、按钮等元素不可访问或可访问。 当需要禁用某个HTML表单元素时,通常的代码是使用element.disabled = true。相对应的,如果想...

    微信小程序点击按钮动态切换input的disabled禁用/启用状态功能

    点击编辑按钮时,文字切换成“保存”,身份证input保持始终不可修改状态(即禁用), 姓名input可以修改(即动态加载切换禁用/启用); 3.再次点击按钮文字切回“编辑”,所有input变为禁用状态。 以下是wxml部分 ...

    表单点击提交按钮后变成灰色.rar

    1. AJAX提交:使用XMLHttpRequest对象或现代浏览器的fetch API,可以实现异步提交表单,不需刷新页面。 2. 回调函数:当异步操作完成后,可以设置回调函数处理结果,比如更新页面显示、恢复按钮状态。 六、用户...

    如何提交表单中disabled表单域的值示例代码

    然而,`disabled`元素则完全不可选中和聚焦,且不参与表单提交,这可能导致某些场景下所需的行为不同。 为了解决这个问题,我们可以采取一种技巧:在提交表单前动态创建一个新的表单副本,并移除所有`disabled`属性...

    怎样通过disabled和readonly将input设置为只读效果.docx

    这意味着,即使用户尝试提交表单,Disabled 的 Input 元素的值也不会被传递。 在 HTML 中,可以使用以下语法来将 Input 元素设置为 Disabled 状态: ```html <input type="text" id="myInput" disabled> ``` 或者,...

    web组件disabled之后灰色变亮样式调整

    4. **更新并测试**:将修改后的样式文件提交到版本控制系统(如CVS)中,并通知团队成员更新代码仓库,以便所有相关人员都能获取最新的样式变更。接着,需要在不同的浏览器和设备上测试这些样式调整的效果,确保它们...

    javascript中input中readonly和disabled区别介绍

    总结来说,`readonly`和`disabled`都是为了限制用户对表单元素的修改,但`readonly`只影响编辑,不影响提交,而`disabled`则全面禁止交互且不包含在提交数据内。开发者应根据具体需求来选择使用哪一个属性,以实现...

    disabled属性

    3. **表单提交:** 在表单提交时,禁用的元素不会被包括在提交的数据中。 #### 四、兼容性 `disabled`属性在所有现代浏览器中都是完全支持的,包括但不限于Chrome、Firefox、Safari、Edge以及Internet Explorer。...

    vue 实现input表单元素的disabled示例

    本文主要介绍了如何在Vue.js框架中实现input表单元素的disabled属性,特别是针对checkbox的禁用。在这篇文章中,作者首先分享了在Vue项目中实现这一功能的需求背景和解决思路,并提供了一个具体的示例代码。文章的...

Global site tag (gtag.js) - Google Analytics