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 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
javascript function、指针及内置对象
Feb 19 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
js随机生成一个验证码
Jun 01 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
php INI配置文件的解析实现分析
2011/01/04 PHP
php实现简单洗牌算法
2013/06/18 PHP
php+mysql数据库查询实例
2015/01/21 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
在模板页面的js使用办法
2010/04/01 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
python实现二维码扫码自动登录淘宝
2016/12/27 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
python opencv之SIFT算法示例
2018/02/24 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
python实现贪吃蛇小游戏
2020/03/21 Python
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
网吧七夕活动策划方案
2014/08/31 职场文书
教书育人演讲稿
2014/09/11 职场文书
老人节标语大全
2014/10/08 职场文书
营业用房租赁协议书
2014/11/26 职场文书
2014年法务工作总结
2014/12/11 职场文书
市场营销计划书
2015/01/17 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
管理失职检讨书范文
2015/05/05 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书