快捷導(dǎo)航

原生js實(shí)現(xiàn)獲取form表單數(shù)據(jù)代碼實(shí)例

更新時(shí)間：2019年03月27日 10:03:19 作者：qq小小布丁

這篇文章主要介紹了原生js實(shí)現(xiàn)獲取form表單數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

本文實(shí)例為大家分享了原生js實(shí)現(xiàn)獲取form表單數(shù)據(jù)的具體代碼，供大家參考，具體內(nèi)容如下

//獲取指定form中的所有的<input>對(duì)象 
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('&'); 
  } 
} 
//調(diào)用方法  
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('&'); 
}

最后通過(guò)serializeForm(formId);輸入form的id名稱(chēng)即可實(shí)現(xiàn)，返回?cái)?shù)據(jù)為

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實(shí)現(xiàn)獲取form表單數(shù)據(jù)詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: