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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
javascript 短路法代码精简
Aug 20 Javascript
JavaScript 页面坐标相关知识整理
Jan 09 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
JavaScript实现世界各地时间显示
Sep 07 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 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不使用递归的无限级分类简单实例
2016/11/05 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
重载toString实现JS HashMap分析
2011/03/13 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
python根据出生日期获得年龄的方法
2015/03/31 Python
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
用pycharm开发django项目示例代码
2018/10/24 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Python Selenium库的基本使用教程
2021/01/04 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
银行工作检查书范文
2014/01/31 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
师恩难忘教学反思
2014/04/27 职场文书
早上好问候语大全
2015/11/10 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
高三物理教学反思
2016/02/20 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js