js获取form表单所有数据

可紊 提交于 2019-12-09 13:23:52

代码如下:

<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); 
}

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!