Home > Web Front-end > JS Tutorial > body text

Detailed explanation of serialized form tutorial

巴扎黑
Release: 2017-08-18 10:05:15
Original
1314 people have browsed it

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>
Copy after login

Method 1


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

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));
Copy after login

Result:

Method 3


 function serializeForm3(form){
   if(!form||form.tagName.toUpperCase()!=&#39;FORM&#39;){
    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));
Copy after login

Result:

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!