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 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
JavaScript闭包实例讲解
Apr 22 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 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
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
js实现拖拽上传图片功能
2017/08/01 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
python获得图片base64编码示例
2014/01/16 Python
详解使用python crontab设置linux定时任务
2016/12/08 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
安全检查管理制度
2014/02/02 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS