欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-14 17:45:15
本文实例为大家分享了原生js实现获取form表单数据的具体代码,供大家参考,具体内容如下 //获取指定form中的所有的对象 f...

本文实例为大家分享了原生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表单数据详解整合,希望对大家有所帮助