Getting box values in js forms and serializing forms _ javascript skills

This article mainly introduces how to obtain the value of a choice box in a js form and how to serialize the form. It also describes how to obtain the value of a single choice, multiple choice, and multiple choice box in a form, you can refer to this document to summarize the selection box value acquisition and form serialization in js forms, and write an object to share with you.

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:

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 +"
"; Html + = formUtil. getRadioValue (form. elements ['sex']) +"
"; Html + = formUtil. getCheckboxValue (form. elements ['hobby']) +"
"; Html + = formUtil. getSelectValue (form. elements ['class']) +"
"; Html + = form. elements ['other']. value +"
"; Html + = decodeURIComponent (formUtil. serialize (form) +"
"; Output. innerHTML = html ;});

The EventUtil code appears in this article:How to Use js cross-browser Event Listeners and event objects

The above is a detailed introduction to the acquisition of Box values in js forms and the serialization of forms. I hope this will be helpful for your learning.