Serialization and JSON of JavaScript form forms [Form.js]

First, the application scenario

When a form is submitted, it is submitted using AJAX.

Second, the effect

　　　　This tool enables fast serialization and JSON of all forms in the form, allowing front-end personnel to manually extract form attributes and corresponding values from repetitive, heavy labor when Ajax submits form forms.

Third, source [Form.js]

　　　　

Encodes the data into a URL request by encoding function serialize (form) {var len=form.elements.length;//form field length; form fields include <input><select        ><button> var field=null;//is used to store each form field var parts=[];//save string The number of option in Var oplen,//select that will be created        Normalvalue,//text,number,date,textarea value opvalue;//select The value of option in//iterates through each form field for (Var i=0;i<len;i++) {        Field=form.elements[i]; /* Detects the type of each form field and makes different processing: * *. The most troublesome is select: It may be a radio box or a multi-box, where the code is suitable for both boxes. After you find a selected item, you need to determine what value to use. If the value attribute does not exist or if it exists but the value is an empty string, use the text of the option instead.        To check this property, use the Hasattribute () method in the DOM-and *-tolerant browser to use the specified attribute of the attribute in IE. If the <fieldset> element is included in the form, the element appears in the form collection but there is no type attribute.        Therefore, if the Type property is undefined, it does not have to be serialized, as is the case with various buttons and file input fields. For radio buttons and check boxes, to check if the Checked property is set to False, exit the switch statement if it is true * and continue with the default content, encoding the current name and value, It is then added to the parts array.            The last step of the function is to use the join to format the entire * string, which is to separate each form field/switch (field.type) {case "Select-one") with reconciliation: CasE "Select-multiple": if (field.name.length) {for (Var j=0,oplen=fil                                    ed.options.length;j<oplen;j++) {option=field.options[j];                                        if (option.selected) {opvalue= '; if (Option.hasattribute) {opvalue= (Option.hasattribute (' value ')? option.value:opt                                        Ion.text); }else{opvalue= (option.hasattribute[' value '].specified?option.value:option.text );//ie} parts.push (encodeURIComponent (fiel                                    D.name) + ' = ' + encodeURIComponent (opvalue));            }}} break; Case Undefined:case ' File ': Case ' submit ': Case ' reset ': Case ' button ': break; Case ' text ': Case ' number ': Case ' date ': Case ' textarea ': if (FIELD.N                    Ame.length) {normalvalue = Field.value;                Parts.push (encodeURIComponent (field.name) + ' = ' +encodeuricomponent (normalvalue));            } break;                Case ' Radio ': Case ' checkbox ': if (!field.checked) {break; } default:if (Field.name.length) {Parts.push (encodeURIComponent (field.name) + '                = ' +encodeuricomponent (opvalue));        } break; }} return Parts.join ("&");}
String form data into JSON-formatted string function stringify (form) {var len=form.elements.length;//form field length; form fields include <input><         select><button> var field=null;//is used to store each form field var parts=[];//save string The number of option in Var oplen,//select that will be created The value of Normalvalue,//text,number,date,textarea opvalue;//select the value of option//iterates through each form field for (Var i=0;i<len;        i++) {field=form.elements[i]; /* Detects the type of each form field and makes different processing: * *. The most troublesome is select: It may be a radio box or a multi-box, where the code is suitable for both boxes. After you find a selected item, you need to determine what value to use. If the value attribute does not exist or if it exists but the value is an empty string, use the text of the option instead.        To check this property, use the Hasattribute () method in the DOM-and *-tolerant browser to use the specified attribute of the attribute in IE. If the <fieldset> element is included in the form, the element appears in the form collection but there is no type attribute.        Therefore, if the Type property is undefined, it does not have to be serialized, as is the case with various buttons and file input fields. For radio buttons and check boxes, to check if the Checked property is set to False, exit the switch statement if it is true * and continue with the default content, encoding the current name and value, It is then added to the parts array.         The last step of the function is to use the join to format the entire * string, which is to separate each form field/switch (field.type) {case "Select-one") with reconciliation:   Case ' select-multiple ': if (field.name.length) {for (Var j=0,opl                                    en=filed.options.length;j<oplen;j++) {option=field.options[j];                                        if (option.selected) {opvalue= '; if (Option.hasattribute) {opvalue= (Option.hasattribute (' value ')? Option.valu                                        E:option.text); }else{opvalue= (option.hasattribute[' value '].specified?option.value:option.text  );//ie} parts.push (encodeURIComponent (' "' +                                    Field.name + ' ":" ') + encodeURIComponent (opvalue)) + ' "';            }}} break; Case UndefinEd:case "file": Case ' submit ': Case ' reset ': Case ' button ': BR            Eak Case ' text ': Case ' number ': Case ' date ': Case ' textarea ': if (field.name.le                    Ngth) {normalvalue = Field.value;                Parts.push (' "' + Field.name + '": "' + normalvalue.trim () + '");            } break;                Case ' Radio ': Case ' checkbox ': if (!field.checked) {break; } default:if (Field.name.length) {Parts.push (' "' + Field.name + '": "' + Norma                Lvalue+ ' ");        } break; }} return ' {' + parts.join (', ') + '} ';}

Iv. attention

　　When a JSON string is instantiated as a JSON object, the format of the JSON string is strictly defined, and the property name and property value must be enclosed in double quotation marks, otherwise an error is made when the JSON conversion is invoked, and the instantiation fails.

Serialization and JSON of JavaScript form forms [Form.js]