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入门教程(8) Location地址对象
Jan 31 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
json 实例详细说明教程
Oct 31 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
如何用JS模拟实现数组的map方法
Jul 30 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 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
Javascript实现单例模式
2016/01/24 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
python获取mp3文件信息的方法
2015/06/15 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
简单了解Django ContentType内置组件
2019/07/23 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
个人委托书如何写
2014/09/25 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
外科护士长工作总结
2015/08/12 职场文书
护士业务学习心得体会
2016/01/25 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP