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. LeetCode OJ:Reverse Linked List (反转链表)

    Reverse a singly linked list. 做II之前应该先来做1的,这个倒是很简单,基本上不用考虑什么,简单的链表反转而已: /** * Definition for singly- ...

  2. <input type="checkbox" name="" value=" ">

    <input type="checkbox"  name=""  value=" ">

  3. mac和linux下使用Docker,部署SpringBoot项目到docker

    主要是看一下如何在linux及mac上安装docker,创建docker镜像,部署SpringBoot项目到docker,并借助于DaoCloud进行docker镜像下载加速等. 我用的电脑是mac, ...

  4. Kotlin 第二弹:Android 中 PDF 创建与渲染实践

    这是 Kotlin 练习的的第二篇.这一篇的由来是因为刚刚在 Android 开发者官网查看 API 的时候,偶然看到了角落里面的 pdf 相关. 我仔细看看了详细文档,发现这个还蛮有意思的,关键是编 ...

  5. [置顶] Android RadioButton与TextView浪漫约会?

    情景一 今天主要实现一个国家与地区切换,就是当我们选中RadioButton时然后将值设置到TextView中,听着这需求应该不难对吧?那么我们就开始约会吧? 看下原型图 准备条件: 首先需要一个ra ...

  6. [EMWIN]关于 GUI_GetPixelIndex 使用的问题

    在模拟器上和st单片机上使用以下代码: GUI_COLOR color0,color1; color0 = GUI_GetPixelIndex(rect.x1+1, rect.y0);color1 = ...

  7. Python标准库之time和datetime

    注:博客转载自:https://www.cnblogs.com/zhangxinqi/p/7687862.html 1.python3日期和时间 Python 程序能用很多方式处理日期和时间,转换日期 ...

  8. JVM年轻代(young generation)老年代(old generation tenured)持久代(permanent generation)GC

    关于jvm内存代,看到这篇文章,转发下 链接地址 ---多谢 虚拟机中的共划分为三个代:年轻代(Young Generation).老年代(Old Generation)和持久代(Permanent ...

  9. Sapnco3 RfcTable Structure

    RfcTable 中字段 并不固定,以下内容仅供参考 1. 包含IDOC的 RfcTable SDATA字段值为IDOC数据,解析IDOC数据需依据IDOC字段长度对SDATA进行截取 functio ...

  10. elasticsearch snapshot快照备份和恢复

    环境:mac   使用brew 安装elasticsearch   1.在 /usr/local/etc/elasticsearch/elasticsearch.yml 文件中配置快照地址     p ...