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 相关文章推荐
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
微信JSSDK上传图片
Aug 23 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 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中通过smtp发邮件的类,测试通过
2007/01/22 PHP
一段php加密解密的代码
2007/07/16 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
10款实用的PHP开源工具
2015/10/23 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
PHP运行模式汇总
2016/11/06 PHP
php的4种常用运行方式详解
2016/12/22 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
会计电算化应届生求职信
2013/11/03 职场文书
秋季运动会稿件
2014/01/30 职场文书
毕业晚会主持词
2014/03/24 职场文书
竞聘书格式及范文
2014/03/31 职场文书
党员个人整改措施
2014/10/24 职场文书
实习推荐信格式模板
2015/03/27 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
openstack中的rpc远程调用的方法
2021/07/09 Python
html5调用摄像头截图功能
2022/01/18 Javascript