js获取form表单所有数据

Posted Henu丶雨巷

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js获取form表单所有数据相关的知识，希望对你有一定的参考价值。

代码如下：

<script type="text/javascript">
    // 获取指定form中的所有的<input>对象
    function getElements(formId) {
        var form = document.getElementById(formId);
        if(form == null){
            return false;
        }
        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 = 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); 
}

 

以上是关于js获取form表单所有数据的主要内容，如果未能解决你的问题，请参考以下文章

服务端Json数据+js表单数据提交的 表单交互插件（base-form.js）

Nodejs中怎么获取HTML中一个form下的所有POST数据？

表单不能为数字或怎么写js

用js代码清空表单数据

js怎么获取form表单中所有的input和select

jquery怎么获取表单所有数据