`

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不能提交的解决方法

    form表单中的Input使用disabled导致不能提交,经测试终有一解,具体如下,希望遇到类似问题的朋友可以参考下,希望对大家有所帮助

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

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

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

    主要介绍了jQuery实现提交表单时不提交隐藏div中input的方法,结合实例形式分析了通过设置input的disabled属性实现隐藏input提交的操作技巧,需要的朋友可以参考下

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

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

    使用HTML开发商业网站-表单控件-input课件.pptx

    表单控件-Input控件 表单控件 学习表单的核心就是学习表单控件,HTML语言提供了一系列的表单控件,用于定义不同...该控件内容为只读(不能编辑修改) disabled disabled 第一次加载页面时禁用该控件(显示为灰色) chec

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

    自然两种出来的效果都是只能读取不能编辑,可是两者有很大不同。 Disabled说明该input无效,及其value不会传递给任何程序,比如asp、php等。 Readonly仅仅是无法编辑,不影响其值的传递。 Disabled使用:<INPUT...

    javascript中input中readonly和disabled区别介绍

    Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / password)和textarea有效,而disabled对于所有的...

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

    Ant design vue 的组件禁用属性 disabled

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

    今天小编就为大家分享一篇vue 实现input表单元素的disabled示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    表单元素属性readonly和disabled使用对比

    1)适应范围: readonly:input[type="text"],input[type="password"],input[type="teaxtarea"] disabled:所有的表单元素,如select, radio, checkbox, button等 2)操作: readonly:不允许用户修改操作,不影响...

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

    本文实例讲述了Web表单提交之disabled问题js解决方法。分享给大家供大家参考。具体分析如下: 例如,有如下表单 代码如下:<form id=”inputForm” action=”shorttermrental.action” method=”post”>  &lt...

    elementUI 设置input的只读或禁用的方法

    PS:下面看下elementui通过 disabled 属性指定是否禁用 input 组件,如何用DOM操作取消disabled 属性 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=...

    使用jQuery设置disabled属性与移除disabled属性

    但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly,...

    html表单控件禁用属性readonly VS disabled介绍

    在html中有两种禁用表单提交的方法,他们分别是:  1.给控件标签加\u4e0areadonly='readonly'属性  2.给控件标签加\u4e0adisabled='disabled'属性  例如:  <input type=text value= readonly=readonly />...

    Readonly和Disabled的区别

    总结如下: Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等。但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式...

    几种设置表单元素中文本输入框不可编辑的方法总结

    输入框无法获得焦点,不能编辑 表单可以获得值。 可以复制。 蛮奇怪的,都选住了,还没有获得焦点? 2,readonly 代码: <input type=”text” value=”fisker” onclick=”alert(this.value);” ...

    阻止表单提交按钮多次提交的完美解决方法

    如果表单是通过onsubmit进行Ajax提交,注意将表单提交按钮input type属性设为button,尽量不要设置为submit类型。 另外,在提交事件发出后,最好将提交按钮设置为disabled,防止由于网络延时问题,让用户有机会进行...

    浅谈html中input只读属性readonly和disable的区别

    Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会...

Global site tag (gtag.js) - Google Analytics