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 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
小程序自定义弹框效果
Nov 16 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
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
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
PHP速成大法
2015/01/30 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
java中两个byte数组实现合并的示例
2018/05/09 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
python初步实现word2vec操作
2020/06/09 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
小学门卫岗位职责
2013/12/17 职场文书
旷课检讨书2000字
2014/01/14 职场文书
国庆节演讲稿
2014/05/27 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
暑期培训班招生方案
2014/08/26 职场文书
员工工作自我评价
2014/09/26 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
解除租赁合同协议书
2016/03/21 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP
Go语言安装并操作redis的go-redis库
2022/04/14 Golang