Web表单提交之disabled问题

例如,有如下表单
 <form id="inputForm" action="shorttermrental.action" method="post">
     <input name="pname" type="text" id="pname" value="xxx" size="20" disabled="true"/>
     <input name="but" type="submit" id="but" value="xxx" size="20"/>
 </form>

当我们提交表单时,在后台是获取不了pname数据的,因为改输入框的属性disabled。即能保存值也能保留用户不能输入这种功能有以下解决方法:

1. 将disabled="true"属性改为readonly="true"代替,其功能是基本一样,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。

web表单disable问题的更多相关文章

  1. “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型,或该类型未注册为安全类型。”

    自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...

  2. 跟服务器交互的Web表单(form)

    使用HTML来构建可以跟服务器交互的Web表单(form),通过给你的form元素添加一个action属性来达到此目的. action属性的值指定了表单提交到服务器的地址. 例如: <form ...

  3. 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用

    基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extj ...

  4. 基于Extjs的web表单设计器 第六节——界面框架设计

    基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extj ...

  5. 基于Extjs的web表单设计器 第五节——数据库设计

    这里列出表单设计器系列的内容,6.7.8节的内容应该在春节后才有时间出了.因为这周末就请假回老家了,准备我的结婚大事.在此提前祝大家春节快乐! 基于Extjs的web表单设计器 基于Extjs的web ...

  6. Flask Web Development —— Web表单(上)

    Flask-WTF扩展使得处理web表单能获得更愉快的体验.该扩展是一个封装了与框架无关的WTForms包的Flask集成. Flask-WTF和它的依赖集可以通过pip来安装: (venv) $ p ...

  7. HTML_创建易用的Web表单

    首先创建一个表单域集合fieldset fieldset元素允许Web开发者将主题相关的表单组合在一起 <fieldset></fieldset> 要说明的是本例子中每个表单都 ...

  8. 使用Visual Studio 2013 从头构建Web表单

    在这篇文章中,我将采取VS 2013中特定的模板,也就是没有身份验证的Web表单模板,并说明如何构建这个项目从头开始.在本教程的最后,你会最终有一个模板,内容几乎是一样的使用Web表单模板没有认证(文 ...

  9. 读书笔记:《HTML5开发手册》Web表单

    这是补充HTML5基础知识的第五篇内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四 ...

随机推荐

  1. python基础之模块一

    一 time模块 时间表示形式 在Python中,通常有这三种方式来表示时间:时间戳.元组(struct_time).格式化的时间字符串:(1)时间戳(timestamp) :通常来说,时间戳表示的是 ...

  2. Java.lang包的接口解读

    Java.lang包中提供了八个接口: 1.Appendable 能够被追加 char 序列和值的对象.如果某个类的实例打算接收来自 Formatter的格式化输出,那么该类必须实现 Appendab ...

  3. vue: data binding

    1.文本 第一种“Mustache” 语法(双大括号)写法第二种 用v-text的指今写法第三种和第四是对es6写法的拓展写法,称模板字符串 <template> <div> ...

  4. Redis 补充

    Redis 补充 Redis 的主要用途 数据库 缓存和消息中间件 相当于一个字典 数据库切换 select 1 (默认36个数据库 默认在0) 1 基本数据类型 字符串 散列 hashes 列表 集 ...

  5. 修改maven仓库位置

    在eclipse中安装好maven2的插件后: 第一步: 默认会放在~/.m2/repository目录下 (“~”代表用户的目录,比如windows7下一般都是C:\Users\zz\.m2\rep ...

  6. Java 实现--时间片轮转 RR 进程调度算法

    时间片轮转(Round-Robin)调度算法是操作系统一种比较公平的进程调度的方式,这种方式使得就绪队列上的所有进程在每次轮转时都可以运行相同的一个时间片. 基本原理 算法实现原理是,按进程到达顺序( ...

  7. [leetcode]_根据二叉树的先序遍历(后序遍历) + 中序遍历 重建二叉树

    题目1:Construct Binary Tree from Preorder and Inorder Traversal 给定一棵二叉树的先序遍历和中序遍历,求重建二叉树. 思路: 1.先序遍历的第 ...

  8. 1076. Wifi密码 (15)

    下面是微博上流传的一张照片:“各位亲爱的同学们,鉴于大家有时需要使用wifi,又怕耽误亲们的学习,现将wifi密码设置为下列数学题答案:A-1:B-2:C-3:D-4:请同学们自己作答,每两日一换.谢 ...

  9. cordic算法的fpga实现

    cordic算法参考:http://wenku.baidu.com/view/6c623aa8910ef12d2bf9e732.html 这是百度文库的一个文档,详细介绍了cordic算法的基本内容. ...

  10. LA2572 Viva Confetti

    题意 PDF 分析 两两圆求交点,对每个圆弧按半径抖动. 时间复杂度\(O(T n^2)\) 代码 #include<iostream> #include<cstdio> #i ...