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

    代码如下:

    <script type="text/javascript">
        // 获取指定form中的所有的<input><select>对象
        function getElements(formId) {
            var form = document.getElementById(formId);
            if(form == null){
                return false;
            }
            var elements = new Array();
            var inputTagElements = form.getElementsByTagName('input');
            for (var j = 0; j < inputTagElements.length; j++) {
                elements.push(inputTagElements[j]);
        
            }
            
            var selectTagElements = form.getElementsByTagName('select');
            for (var j = 0; j < selectTagElements.length; j++) {
                elements.push(selectTagElements[j]);
        
            }
            return elements;
        }
        
        // 获取单个input中的【name,value】数组
        function inputSelector(element) {
            if (element.checked)
                return [ element.name, element.value ];
        }
        
        function selectOne(element){
            var value = $(element).find("option:selected").val();
            if(value != ""){
                var name = $(element).attr("name");
                return [name, 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);
            case 'select-one':
                return selectOne(element);
            }
            return false;
        }
        
        // 组合URL
        function serializeElement(element) {
            var method = element.tagName.toLowerCase();
            var parameter = input(element);
        
            if (parameter) {
                var key = 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 + '=' + 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>
    <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>
     
     
    function getFormInfo(){ 
      var params = serializeForm('login'); 
      alert(params); 
    }
  • 相关阅读:
    Inno Setup进阶之事件函数(二)
    nginx日志相关指令(十二)
    linux下操作文件以分隔符切割并去重
    Inno Setup进阶之窗口初始化(一)
    nginx之CoreFunctionality(十一)
    nginx常量参数(十)
    Inno Setup安装添加条件语句到Run
    nginx命令行参数修改(九)
    nginx单位符号(八)
    nginx连接处理方式(七)
  • 原文地址:https://www.cnblogs.com/henuyuxiang/p/12010407.html
Copyright © 2011-2022 走看看