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 相关文章推荐
JavaScript 设计模式学习 Singleton
Jul 27 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
Vue实现简单的跑马灯
May 25 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 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
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
Python标准库之collections包的使用教程
2017/04/27 Python
python版学生管理系统
2018/01/10 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
python 操作hive pyhs2方式
2019/12/21 Python
python实现ftp文件传输功能
2020/03/20 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
运动会通讯稿200字
2014/02/16 职场文书
学习经验演讲稿
2014/05/10 职场文书
趣味运动会策划方案
2014/06/02 职场文书
大学生自荐材料范文
2014/12/30 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
资金申请报告范文
2015/05/14 职场文书
Go 中的空白标识符下划线
2022/03/25 Golang
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS