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 相关文章推荐
Date对象格式化函数代码
Jul 17 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 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
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
PHP 图片处理
2020/09/16 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
python机器学习之神经网络实现
2018/10/13 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
校园网站的创业计划书范文
2013/12/30 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
程序员求职信
2014/04/16 职场文书
2014中考励志标语
2014/06/05 职场文书
教师工作失职检讨书
2014/09/18 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
教师听课评语大全
2014/12/31 职场文书
2015年母亲节寄语
2015/03/23 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers