zoukankan      html  css  js  c++  java
  • JS 获取form表单的所有数据

    在HTML中用js获取通过GET、POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值。
    针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为
    公用方法直接调用。可以提高大家的开发效率。
     
    html:
    <body>              
        <form id="login" name="login" method="post" action="result.jsp">  
            <input name="user" type="text"/>  
            <input name="sex" type="radio" value="man"/>  
            <input name="sex" type="radio" value="woman"/>  
            interest:
            <input type="checkbox" name="interest" value="piu">PIU 
            <input type="checkbox" name="interest" value="dss">DSS 
            <input type="checkbox" name="interest" value="ddr">DDR<br>    
            <input type="hidden" name="from" value="welcome"><br>    
            <input type="button" name="submit" value="submit" onclick="getFormInfo();">    
        </form>  
    </body>
    

    封装:

    <script type="text/javascript">  
      
    //获取指定form中的所有的<input>对象    
    function getElements(formId) {    
        var form = document.getElementById(formId);    
        var elements = new Array();    
        var tagElements = form.getElementsByTagName('input');    
        for (var j = 0; j < tagElements.length; j++){  
             elements.push(tagElements[j]);  
      
        }  
        return elements;    
    }   
      
    //获取单个input中的【name,value】数组  
    function inputSelector(element) {    
      if (element.checked)    
         return [element.name, element.value];    
    }    
          
    function input(element) {    
        switch (element.type.toLowerCase()) {    
          case 'submit':    
          case 'hidden':    
          case 'password':    
          case 'text':    
            return [element.name, element.value];    
          case 'checkbox':    
          case 'radio':    
            return inputSelector(element);    
        }    
        return false;    
    }    
      
    //组合URL  
    function serializeElement(element) {    
        var method = element.tagName.toLowerCase();    
        var parameter = input(element);    
        
        if (parameter) {    
          var key = encodeURIComponent(parameter[0]);    
          if (key.length == 0) return;    
        
          if (parameter[1].constructor != Array)    
            parameter[1] = [parameter[1]];    
              
          var values = parameter[1];    
          var results = [];    
          for (var i=0; i<values.length; i++) {    
            results.push(key + '=' + encodeURIComponent(values[i]));    
          }    
          return results.join('&');    
        }    
     }    
      
    //调用方法     
    function serializeForm(formId) {    
        var elements = getElements(formId);    
        var queryComponents = new Array();    
        
        for (var i = 0; i < elements.length; i++) {    
          var queryComponent = serializeElement(elements[i]);    
          if (queryComponent)    
            queryComponents.push(queryComponent);    
        }    
        
        return queryComponents.join('&');  
    }    
      
    </script>
    

    js:

    function getFormInfo(){  
        var params = serializeForm('login');  
        alert(params);  
    }
    

    .

  • 相关阅读:
    cinder支持nfs快照
    浏览器输入URL到返回页面的全过程
    按需制作最小的本地yum源
    创建可执行bin安装文件
    RPCVersionCapError: Requested message version, 4.17 is incompatible. It needs to be equal in major version and less than or equal in minor version as the specified version cap 4.11.
    惠普IPMI登陆不上
    Linux进程状态——top,ps中看到进程状态D,S,Z的含义
    openstack-neutron基本的网络类型以及分析
    openstack octavia的实现与分析(二)原理,架构与基本流程
    flask上下文流程图
  • 原文地址:https://www.cnblogs.com/crazycode2/p/8485352.html
Copyright © 2011-2022 走看看