表单设置 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” 有效。


相关文章
|
3月前
若依框架 --- 修改默认跳转页面
若依框架 --- 修改默认跳转页面
259 0
|
JavaScript
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
1881 0
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
|
6月前
|
JavaScript
【VUE异常】el-popconfirm失效,@confirm事件不生效,点击没有任何反应,刷新页面才能点击
【VUE异常】el-popconfirm失效,@confirm事件不生效,点击没有任何反应,刷新页面才能点击
120 0
|
5月前
|
前端开发
怎么查看前端表单提交到后台的所有参数
怎么查看前端表单提交到后台的所有参数
18 0
|
5月前
element中form表单resetFields()方法重置表单无效
element中form表单resetFields()方法重置表单无效
|
JavaScript 前端开发
Odoo 自定义form表单按钮点击事件处理程序
Odoo 自定义form表单按钮点击事件处理程序
224 0
PbootCMS自定义前台404错误页面
PbootCMS自定义前台404错误页面
651 0
PbootCMS自定义前台404错误页面
|
前端开发
【前端异常】html页面中的button按钮会自动提交form表单的问题以及解决方案
有时候我们可能需要在表单中放置多个按钮,比如表单页面常见的按钮有创建和取消。点击创建按钮会触发单击响应事件,在单击响应事件中进行提交表单,这没有任何问题。点击取消按钮的时候,触发对应的单击响应事件,这个单击响应事件中主要处理关闭表单页面逻辑,所以会关闭页面,这也正常。但是!打开控制台监听请求会发现,它也会提交表单。
521 0
【前端异常】html页面中的button按钮会自动提交form表单的问题以及解决方案
|
前端开发 JavaScript Java
关于select框下设置了disabled导致前台有值,但后台接收不到的情况记录
在项目(传统JSP)需要改版页面的时候,进入页面前先获取后台传过来的数据,但一部分数据需要设置不可编辑,select框是不支持readonly的,故将select加disabled,此时则引起了一些问题,后台取不到加了disabled属性的值。
312 0
关于select框下设置了disabled导致前台有值,但后台接收不到的情况记录
|
存储 JavaScript 前端开发
通过表单隐藏域向后台传值
通过表单隐藏域向后台传值
596 0
通过表单隐藏域向后台传值