表单设置 disabled 后无法传值到后台的解决办法

简介: 表单设置 disabled 后无法传值到后台的解决办法

提交 from 表单时,如果input字段设为disabled,该字段是无法正常提交给后台的。

<input type="text" name="name" disabled />

解决

  1. 将表单中字段disabledreadonly代替即可(如有需要,可以对该表单加上灰色的背景色)
  2. 可以在写一个隐藏属性,一个用于传值,一个用于显示

disabled和readonly的异同

相同点

  • 都可使文本框不能输入文字。
  • 可以通过js脚本修改其value值。
  • 想要撤销,只能删除相应的属性,设置flase无效

不同点

disabled

  • input无法接收焦点
  • 使用tab键会跳过元素
  • disabled不会对任何事件进行响应(比如:click事件无效)。
  • disabled的元素的值不会提交。
  • disabled属性可以用于所有的表单元素。

readonly

  • input可以接收焦点
  • 使用tab键不会跳过元素
  • readonly会对事件进行响应。
  • readonly的元素的值会提交。
  • readonly属性只对 type=“text” 、 textarea 和 type=“password” 有效。


相关文章
vue 将Checkbox 多选框选中的值提交到后台
vue 将Checkbox 多选框选中的值提交到后台
|
JavaScript
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
2168 0
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
输入框禁用状态 可清空输入框如何实现?组件写的
输入框禁用状态 可清空输入框如何实现?组件写的
layui的富文本编辑器layedit设置禁用状态
layui的富文本编辑器layedit设置禁用状态
143 0
|
8月前
|
JavaScript
vue如何禁止通过页面输入路径跳转页面
vue如何禁止通过页面输入路径跳转页面
344 0
element中form表单resetFields()方法重置表单无效
element中form表单resetFields()方法重置表单无效
198 0
|
前端开发
【前端异常】html页面中的button按钮会自动提交form表单的问题以及解决方案
有时候我们可能需要在表单中放置多个按钮,比如表单页面常见的按钮有创建和取消。点击创建按钮会触发单击响应事件,在单击响应事件中进行提交表单,这没有任何问题。点击取消按钮的时候,触发对应的单击响应事件,这个单击响应事件中主要处理关闭表单页面逻辑,所以会关闭页面,这也正常。但是!打开控制台监听请求会发现,它也会提交表单。
674 0
【前端异常】html页面中的button按钮会自动提交form表单的问题以及解决方案
|
JavaScript
Vue input输入框回车以后自动刷新页面
Vue input输入框回车以后自动刷新页面
Vue input输入框回车以后自动刷新页面
|
前端开发 程序员
提交文件至服务器的设置——表单属性中的 enctype
提交文件至服务器的设置——表单属性中的 enctype
271 0
SwiftUI—如何激活表单以及如何使表单失效
SwiftUI—如何激活表单以及如何使表单失效
168 0
SwiftUI—如何激活表单以及如何使表单失效

热门文章

最新文章