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 相关文章推荐
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 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
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
Python中类的继承代码实例
2014/10/28 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
python安装twisted的问题解析
2018/08/21 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
python解包概念及实例
2021/02/17 Python
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
计算机专业推荐信范文
2013/11/20 职场文书
优秀士兵个人事迹材料
2014/01/19 职场文书
品牌推广策划方案
2014/05/28 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
主题党日活动总结
2014/07/08 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
python基础之类属性和实例属性
2021/10/24 Python
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers