In js form processing, single-choice, multiple-choice, and multiple-choice box value acquisition, form serialization, and js serialization

In js form processing, single-choice, multiple-choice, and multiple-choice box value acquisition, form serialization, and js serialization

This article summarizes the single-choice, multiple-choice, and multiple-choice box value acquisition and form serialization in form processing, and writes it into an object. As follows:

Var formUtil = {// obtain the value of the single-choice button. If no value is selected, null is returned. // reference of the set whose elements are radio classes getRadioValue: function (elements) {var value = null; // null indicates no selected items. // if (elements. value! = Undefined & elements. value! = '') {Value = elements. value;} else {// IE browser for (var I = 0, len = elements. length; I <len; I ++) {if (elements [I]. checked) {value = elements [I]. value; break ;}}return value ;}, // obtain the value of the multiple-choice button. If no value is selected, return null // reference of the input set whose elements is 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 (el Ements [I]. value) ;}} if (arr. length> 0) {return arr. join (',') ;}else {return null; // null indicates no selected items }}, // get the value of the drop-down box // element is a reference to the select element getSelectValue: function (element) {if (element. selectedIndex =-1) {return null; // return null if no selected item exists}; if (element. 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 {// select return element for a single item. options [element. selectedIndex]. value ;}}, // serialize // form as a reference to form elements 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]; // if (field. disabled) {continue;} switch (field. type ){// Case "select-one": case "select-multiple": arr. push (encodeURIComponent (field. name) + "=" + encodeURIComponent (this. getSelectValue (field); break; // do not send the following types of form fields case undefined: case "button": case "submit": case "reset ": case "file": break; // single-choice, multiple-choice, and Other forms processing case "checkbox": if (checkboxName = null) {checkboxName = field. name; arr. push (encodeURIComponent (checkboxName) + "=" + enco DeURIComponent (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 ("&");}};

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> gender: <input name = "sex" type = "radio" value = "male"/> male <input name = "sex" type = "radio" value = "female"/> female <br> Hobbies: <input name = "holobby" type = "checkbox" value = "basketball"/> basketball <input name = "holobby" type = "checkbox" value = "soccer"/> football <input name = "holobby" type = "checkbox" value = ""/> Table Tennis <input name = "holobby" type = "checkbox" value = ""/> Badminton <br/> grade: <select name = "class" multiple> <option value = "First Grade"> First Grade </option> <option value = "Second Grade"> Second Grade </option> <option value =" grade 3 "> grade 3 </option> </select> <br/> others: <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 submit 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 (form) + "<br>"; output. innerHTML = html ;});

If you want to continue learning, refer to the following topics.Javascript selection box operation,Jquery selection box operation

The above are the objects that are used to obtain the single-choice, multiple-choice, and multiple-choice box values and serialize and encapsulate the form in js form processing. We hope this will be helpful for learning the attack.

Articles you may be interested in:

• Javascript checks whether a single sequence or check box selects a method collection
• JQuery SELECT single-choice simulation jQuery. select. js
• ExtJS Grid uses SimpleStore and multi-choice box
• Code for passing values in the js select multiple-choice list
• ExtJS drop-down multi-choice box lovcombo
• Js to obtain the value and operation of a single sequence or check box
• Jquery serialized form json data returned after ajax submission
• How to serialize form elements into json objects using jQuery
• Getting box values and serialization of forms in js forms
• Processing of converting form serialized data into objects based on JavaScript (allowing objects to contain objects)