Acquisition of radio, multiple selection and selection box values in JS form processing and _javascript techniques of form serialization

This article summarizes the following in the form processing of radio, multiple selection, selection box values and the serialization of the form, written an object. is as follows:

var formutil = {//Get the radio button's value, if there is no election returns null//elements as a reference to the collection of the Radio class Getradiovalue:function (elements) {var value = NULL; NULL indicates no selected//non IE browser if (elements.value!= undefined && elements.value!= ') {value = Elements.valu
   E else {//IE browser for (var i = 0, len = elements.length i < len; i++) {if (elements[i].checked) {V
      Alue = Elements[i].value;
     Break
  }} return value;  },//Get the value of the multiple-selection button, if there is no choice return null//elements reference to the input collection for the checkbox type 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 means there is no selection}},//Gets the value of the dropdown box/element is a reference getselectvalue:function for the Select element (ele
   ment) {if (Element.selectedindex = = 1) {return null;//////null} if no selected item; if (elEment.multiple) {//Multiple select 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{//single selection return element.options[element.selectedindex].value; 
   //The serialization//form is a reference to the form 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 field if (field.disabled) {continue; Switch (field.type) {//Selection box processing case "Select-one": Case "Select-multiple": Arr.push (Encodeurico
      Mponent (field.name) + "=" + encodeURIComponent (this.getselectvalue (field));
     
     Break
      Do not send the following types of form field case Undefined:case "button": Case "submit": Case "reset": Case "File":
     
     Break Radio, multiple selectionand other types of forms processing case "checkbox": if (Checkboxname = null) {checkboxname = Field.name; Arr.push (encodeURIComponent (checkboxname) + "=" + encodeURIComponent (this.getcheckboxvalue
      Checkboxname]));
     } break;
      Case "Radio": if (!field.checked) {break; } default:if (Field.name.length > 0) {arr.push (encodeURIComponent (field.name) + "=" + Encodeuricompo
      Nent (Field.value));
  }} return Arr.join ("&"); } 
 };

A 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> sex: <input name= "Sex" type= "Radio" value= "male"/> Male <inp 
  UT name= "Sex" type= "Radio" value= "female"/> Female <br> Hobby: <input name= "hobby" type= "checkbox" value= "basketball"/> Basketball <input name= "hobby" type= "checkbox" value= "soccer"/> Soccer <input name= "hobby" type= "checkbox" value= "Table tennis"/> Ping Pong ball <input name= "hobby" type= "checkbox" value= "Badminton"/> Badminton <br/> Grade: <select name= "Class" multiple&
   Gt <option value= "First grade" > First year </option> <option value= "second Grade" > second grade </option> <option value= "third grade" ; third grade </option> </select> <br/> Others: <br/> <textarea name= "Other" rows= "5" cols= "30 "Tabindex=" 2 "></textarea> <br/> <input type=" reset "value=" reset "/> <input" Submit " Value= "Submit"/>;/form> <div id= "Output" ></div> 

var form = document.getElementById ("Form1"),
 output = document.getElementById ("output");
 
 Custom Commit event
 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) + "<br>";
  output.innerhtml = html;
 });

If you want to continue to study, please refer to the following topics "JavaScript marquee action","jquery selector box operation"

The above is for JS form processing in radio, multiple selection, the selection of box value and form of the serialization of the package of objects, I hope to combat learning help.