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

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.