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对象的property和prototype是什么一种关系
Aug 06 Javascript
Javascript valueOf 使用方法
Dec 28 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
Javascript实现基本运算器
Jul 15 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
js实现九宫格抽奖
Mar 19 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安全编程之加密功能
2006/10/09 PHP
PHP序列化操作方法分析
2016/09/28 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
javascript各种复制代码收集
2008/09/20 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
python实现查询IP地址所在地
2015/03/29 Python
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Python操作MongoDB详解及实例
2017/05/18 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
python实现简易通讯录修改版
2018/03/13 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
python重要函数eval多种用法解析
2020/01/14 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
师范毕业生个人求职信
2013/12/09 职场文书
财会自我鉴定范文
2013/12/27 职场文书
教师演讲稿范文
2014/01/08 职场文书
高一化学教学反思
2014/02/05 职场文书
就职演讲稿范文
2014/05/19 职场文书
自我管理的活动方案
2014/08/25 职场文书
大学军训的体会
2014/11/08 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python