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


Posted in Javascript onJanuary 13, 2015

本文实例讲述了Web表单提交之disabled问题js解决方法。分享给大家供大家参考。具体分析如下:

例如,有如下表单

<form id="inputForm" action="shorttermrental.action" method="post">

     <input name="pname" type="text" id="pname" value="xxx" size="20" disabled="disabled"/>

     <input name="but" type="submit" id="but" value="xxx" size="20"/>

</form>

当我们提交表单时,在后台是获取不了pname数据的,因为该输入框的属性disabled。即能保存值也能保留用户不能输入这种功能有以下解决方法:

1. 将disabled="disabled"属性改为readonly="readonly"代替,其功能是基本一样,readonly还能支持onfocus事件。(推荐使用)

<input name="xxx" id="xxx" value="xxx" size="20" readonly="readonly"/>

2. 在form表单提交时利用js将disabled属性修改
<input name="but" type="button" id="but" value="xxx" size="20"/>

<script type="text/javascript">

function submit_form(){

 //javascript写法

 document.getElementById("pname").disabled="";

 document.getElementById("inputForm").submit();

 //jQuery写法

 $("#pname").attr("disabled",false);

 $("#inputForm").submit();

}

</script>

3. 将pname的值用js获取,使用参数形式传递,修改form的action值,当然这样需要修改后台代码,获取该参数(getParameter);
<script type="text/javascript">

function submit_form(){

    //jQuery写法

      var pname = $("#pname").val();

 $("#inputForm").attr("action","shorttermrental.action?panme="+pname+"&p="+new Date());

    $("#inputForm").submit();

  //javascript写法

    var pname = document.getElementById("pname").value;

    document.getElementById("pname").action = "shorttermrental.action?panme="+pname+"&p="+new Date();

    document.getElementById("pname").submit();

    }

</script>

一点小建议:当我们书写脚本语言时,我们一般热衷于jQuery书写,因为它很简炼,jQuery是将javascript封装的,取HTML等值时,采用正则表达式匹配获取,
因此必然影响效率,所以建议大家当有大量脚本时,一般采用javascript。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
jquery last-child 列表最后一项的样式
Jan 22 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 #Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 #Javascript
使用javascript实现雪花飘落的效果
Jan 13 #Javascript
javascript数组输出的两种方式
Jan 13 #Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 #Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 #Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
PHP 正则表达式小结
2015/02/12 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
电子商务毕业生求职信
2013/11/10 职场文书
化学实验员岗位职责
2013/12/28 职场文书
干部选拔任用方案
2014/05/26 职场文书
工业设计专业自荐书
2014/06/05 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis