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


相关文章
element el-cascader动态编辑赋值后,不回显的解决方法(整理)
element el-cascader动态编辑赋值后,不回显的解决方法(整理)
vue 将Checkbox 多选框选中的值提交到后台
vue 将Checkbox 多选框选中的值提交到后台
uniapp动态禁用mescroll-body组件的下拉刷新,或者动态禁用mescroll-body组件的上拉加载
uniapp动态禁用mescroll-body组件的下拉刷新,或者动态禁用mescroll-body组件的上拉加载
506 0
ElementPlus菜单如何默认打开第一个,router-view里替换变的,menu菜单没有跳转怎么办,开启路由:router=“true“,如何设置点击空格就调用方法
ElementPlus菜单如何默认打开第一个,router-view里替换变的,menu菜单没有跳转怎么办,开启路由:router=“true“,如何设置点击空格就调用方法
ElementPlus菜单如何默认打开第一个,router-view里替换变的,menu菜单没有跳转怎么办,开启路由:router=“true“,如何设置点击空格就调用方法
输入框禁用状态 可清空输入框如何实现?组件写的
输入框禁用状态 可清空输入框如何实现?组件写的
layui的富文本编辑器layedit设置禁用状态
layui的富文本编辑器layedit设置禁用状态
150 0
|
JavaScript
JQuery 获取选中多选框的value,合并成字符串传给后台
JQuery 获取选中多选框的value,合并成字符串传给后台
61 0
element中form表单resetFields()方法重置表单无效
element中form表单resetFields()方法重置表单无效
211 0
|
JavaScript 前端开发
Vue实现页面内容禁止选中功能
Vue实现页面内容禁止选中功能
308 0
|
前端开发 JavaScript Java
关于select框下设置了disabled导致前台有值,但后台接收不到的情况记录
在项目(传统JSP)需要改版页面的时候,进入页面前先获取后台传过来的数据,但一部分数据需要设置不可编辑,select框是不支持readonly的,故将select加disabled,此时则引起了一些问题,后台取不到加了disabled属性的值。
503 0
关于select框下设置了disabled导致前台有值,但后台接收不到的情况记录