js获取form表单所有数据

Posted 一抹夏忧

tags:

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

<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>
<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怎么获取表单所有数据