js form processing in radio multiple selection select box values and form serialization

This paper summarizes the following in the form processing in the radio, multiple selection, select box value and the serialization of the form, written as an object. As follows:

var formUtil = {
  //  Gets the value of a radio button, and returns if it is not selected null
  // elements for radio A reference to a collection of classes 
  getRadioValue:function(elements) {
   var value = null; // null Indicates that no item is selected 
   //  non IE The browser 
   if(elements.value != undefined && elements.value != '') {
    value = elements.value;
   } else {
    // IE The browser 
    for(var i = 0, len = elements.length; i < len; i++ ) {
     if(elements[i].checked) {
      value = elements[i].value;
      break;
     }
    }
   }
   return value;
  },
  
  //  Gets the value of a multiselect button, and returns if there is no selection null
  // elements for checkbox The type of input Reference to a collection 
  getCheckboxValue:function(elements) {
   var arr = new Array();
   for(var i = 0, len = elements.length; i < len; i++ ) {
    if(elements[i].checked) {
     arr.push(elements[i].value);
    }
   }
   if(arr.length > 0) {
    return arr.join(',');
   } else {
    return null; // null Indicates that no item is selected 
   } 
  },
  
  //  Gets the value of the drop-down box 
  // element for select Reference to an element 
  getSelectValue:function(element) {
   if(element.selectedIndex == -1) {
    return null; //  Returns when there is no selected item null
   };
   if(element.multiple) {
    //  Multiple choice 
    var arr = new Array(), options = element.options;
    for(var i = 0, len = options.length; i < len; i++) {
     if(options[i].selected) {
      arr.push(options[i].value);
     }
    }
    return arr.join(",");
   }else{
    //  Individual choice 
    return element.options[element.selectedIndex].value;
   }
  },
  
  //  serialization 
  // form for form Reference to an element 
  serialize:function(form) {
   var arr = new Array(),
   elements = form.elements,
   checkboxName = null;
   for(var i = 0, len = elements.length; i < len; i++ ) {
    field = elements[i];
    //  Do not send disabled form fields 
    if(field.disabled) {
     continue;
    }
    switch (field.type) {
     //  Selection box handling 
     case "select-one":
     case "select-multiple":
      arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(this.getSelectValue(field)));
      break;
     
     //  Do not send form fields of the following types  
     case undefined :
     case "button" :
     case "submit" :
     case "reset" :
     case "file" :
      break;
     
     //  Single selection, multiple selection, and other types of form processing   
     case "checkbox" :
      if(checkboxName == null) {
       checkboxName = field.name;
       arr.push(encodeURIComponent(checkboxName) + "=" + encodeURIComponent(this.getCheckboxValue(form.elements[checkboxName])));
      }
      break;
     case "radio" :
      if(!field.checked) {
       break;
      }
     default:
      if(field.name.length > 0) {
       arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
      } 
    }
   }
   return arr.join("&");
  } 
 };

1 simple demo:

<form action="test_php.php" id="form1" name="form1" method="post" enctype="multipart/form-data">
   Name: <input name="name" type="text" tabindex="1" /> <br>
   Gender: <input name="sex" type="radio" value=" male "/>  male  
    <input name="sex" type="radio" value=" female " />  female  <br>
   Hobbies: 
  <input name="hobby" type="checkbox" value=" basketball " />  basketball 
  <input name="hobby" type="checkbox" value=" football " />  football 
  <input name="hobby" type="checkbox" value=" Table tennis " />  Table tennis 
  <input name="hobby" type="checkbox" value=" badminton " />  badminton 
  <br />
   Grade: 
  <select name="class" multiple>
   <option value="1 grade ">1 grade </option>
   <option value="2 grade ">2 grade </option>
   <option value="3 grade ">3 grade </option>
  </select>
  <br />
    Other: 
   <br />
   <textarea name="other" rows="5" cols="30" tabindex="2"></textarea>
   <br />
   <input type="reset" value=" reset " />
   <input type="submit" value=" submit " />
 </form>
 <div id="output"></div>

var form = document.getElementById("form1"),
 output = document.getElementById("output");
 
 //  Custom commit events 
 EventUtil.addEventListener(form,"submit", function(event) {
  event = EventUtil.getEvent(event);
  EventUtil.preventDefault(event);
  var html = "";
  html += form.elements['name'].value + "<br>";
  html += formUtil.getRadioValue(form.elements['sex']) + "<br>";
  html += formUtil.getCheckboxValue(form.elements['hobby']) + "<br>";
  html += formUtil.getSelectValue(form.elements['class']) + "<br>";
  html += form.elements['other'].value + "<br>";
  html += decodeURIComponent(formUtil.serialize(form)) + "<br>";
  output.innerHTML = html;
 });

If you want to learn more, please refer to the following topics: javascript Selection Box Operation, jquery Selection Box Operation

The above is for js form processing in the radio, multiple selection, selection box value acquisition and form serialization encapsulation of the object, I hope to help the study of the blow.