Detailed explanation of form serialization (graphic tutorial)

This article mainly introduces the form serialization operation. By serializing the key values ​​​​in the form into a submittable string, and attaching a code example to explain the results in detail after operation, friends in need can refer to the following

Serialization of the form, that is, serializing the key values ​​​​in the form into a submittable string

Form

 <form id="target">
  <select name="age">
   <option value="age1">20</option>
   <option value="age2" selected>21</option>
  </select>
  <input name="name" value="Cynthia">
  <label>passsword</label>
  <input type="password" name="password" value="123456">
  <input type="hidden" name="salery" value="3333">
  <textarea name="description" cols="15" rows="5">description</textarea>
  <input type="checkbox" name="hobby" value="football" checked> Football
  <input type="checkbox" name="hobby" value="basketball"> Basketball
  <input type="radio" name="sex" value="Female" checked> Female
  <input type="radio" name="sex" value="Male"> Male
 </form>

##Method 1

function serializeForm1(form){ 
   var setForm = ""; 
   for(var key in form){ 
    if(form.hasOwnProperty(key)){ 
     setForm += '"'+form[key].name+'"'+':'+'"'+form[key].value + '"'+',';
    }
   }
   setForm = "{" + setForm.slice(0,setForm.length -1) + "}";
   console.log(setForm);
   // console.log(JSON.parse(setForm));
   return JSON.parse(setForm);
  }
   
  // 调用
  var oForm = document.getElementById('target');
  console.log(serializeForm3(oForm));

Result:

Method 2

 function serializeForm2(form) {
   var parts = [];
   for (var i = 0, i1 = form.elements.length; i < i1; i++) {
    var field = form.elements[i];
    switch (field.type) {
     case &#39;select-one&#39;:
     case &#39;select-multiple&#39;:
      if (field.type.length) {
       for (var j = 0, j1 = field.options.length; j < j1; j++) {
        var option = field.options[j];
        if (option.selected) {
         var optionValue = &#39;&#39;;
         if (option.hasAttribute(&#39;value&#39;) && option.attributes[&#39;value&#39;].specified) {
          //specified表明是否有此属性，有的话返回true，若定义了此属性但尚未添加到元素中也返回true。
          optionValue = option.value;
         } else {
          optionValue = optionValue.text;
         }
         parts.push(encodeURIComponent(field.name) + &#39;=&#39; + encodeURIComponent(optionValue));
        }
       }
      }
      break;
     case undefined:
     case &#39;file&#39;:
     case &#39;submit&#39;:
     case &#39;reset&#39;:
     case &#39;button&#39;:
      break;
     case &#39;radio&#39;:
     case &#39;checkbox&#39;:
      if(!field.checked){
       break;
      }else{
       parts.push(encodeURIComponent(field.name) + &#39;=&#39; + encodeURIComponent(field.dataset[&#39;index&#39;]));
       break;
      }
     default:
      if(field.name.length){
       parts.push(encodeURIComponent(field.name) + &#39;=&#39; + encodeURIComponent(field.value));
      }
    }
   }
   return parts.join(&#39;&&#39;);
  }
   
  // 调用
  var oForm = document.getElementById(&#39;target&#39;);
    console.log(serializeForm2(oForm));

Result:

Method 3

 function serializeForm3(form){
   if(!form||form.tagName.toUpperCase()!='FORM'){
    return false;
   }
   var res=[];
   var tag,tagType,tagVal,tagName;
   for(var i=0;i<form.length;i++){
    tag=form[i];
    tagType=form[i].type;
    tagVal=form[i].value;
    tagName=form[i].name; 
    var reg1=/[&#39;textarea&#39;|&#39;text&#39;|&#39;passsword&#39;|&#39;label&#39;]/g;
    var reg2=/[&#39;radio&#39;|&#39;checkbox&#39;]/g;
    var reg3=/[&#39;select&#39;]/g;
    if(reg1.test(tagType)){
     res.push(encodeURIComponent(tagName)+"="+encodeURIComponent(tagVal));
    }else if(reg2.test(tagType)&&tag.checked){
     res.push(encodeURIComponent(tagName)+"="+encodeURIComponent(tagVal)); 
    }else if(reg3.test(tagType)){
     for(var j=0;j<tag.options.length;j++){
      if(tag.options[j].selected){
      res.push(encodeURIComponent(tagVal)+"="+encodeURIComponent(tag.options[j].value||tag.options[j].text)); 
      }
     }
    }else{}
   } 
   return res.join(" & ");
  }
   
  // 调用
  var oForm = document.getElementById(&#39;target&#39;);
  console.log(serializeForm3(oForm));

Result:

The above is the entire content of this article, I hope it will be helpful to everyone~

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

nodejs Detailed explanation of express implementation file upload case

webpack.config .jsParameter usage case

p5.jsHow to load images

The above is the detailed content of Detailed explanation of form serialization (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!