原生js实现获取form表单数据代码实例

本文实例为大家分享了原生js实现获取form表单数据的具体代码，供大家参考，具体内容如下

//获取指定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]); 
 } 
 var tagElements = form.getElementsByTagName('select'); 
 for (var j = 0; j < tagElements.length; j++){ 
 elements.push(tagElements[j]); 
 } 
 var tagElements = form.getElementsByTagName('textarea'); 
 for (var j = 0; j < tagElements.length; j++){ 
 elements.push(tagElements[j]); 
 }
 return elements; 
} 
//组合URL 
function serializeElement(element) { 
 var method = element.tagName.toLowerCase(); 
 var parameter; 
 if(method == 'select'){
 parameter = [element.name, element.value]; 
 }
 switch (element.type.toLowerCase()) { 
 case 'submit': 
 case 'hidden': 
 case 'password': 
 case 'text':
 case 'date':
 case 'textarea': 
 parameter = [element.name, element.value];
 break;
 case 'checkbox': 
 case 'radio': 
 if (element.checked){
 parameter = [element.name, element.value]; 
 }
 break; 
 } 
 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('&'); 
} 

最后通过serializeForm(formId);输入form的id名称即可实现，返回数据为

id=1&title=%E6%B4%BB%E5%8A%A8&time=2017-07-10&status=1&importance=0&desc=%E5%9C%A8%E4%BA%8C%E6%A5%BC%E5%8A%9E%E5%85%AC%E5%AE%A4%E5%BC%80%E4%BC%9A%EF%BC%8C%E4%B8%80%E7%82%B9%E9%92%9F

以上所述是小编给大家介绍的原生js实现获取form表单数据详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！