原生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表单数据详解整合，希望对大家有所帮助