JS form data acquisition form

 

1. Sometimes steal lazy point, there are a lot of forms to submit data on the page, every acquisition alone is too much trouble. Redundancy codes will be more, thus a method for packaging.

2. The form element must have a name attribute, name attribute is the field data submitted to the backend.

3.html Code

<h3>下拉框</h3>
    <select name="sel" id="sel" class="query">
        <option value ="sel-1">sel-1</option>
        <option value ="sel-2">sel-2</option>
    </select>
    <h3>输入框</h3>
    <input type="text" name="text1"  class="query" value="hello" />
    <input type="text" name="text2"  class="query" value="word" />
    <h3>密码框</h3>
    <input type="password" name="password" class="query" value="123456" />
    <h3>单选框</h3>
    单选1<input type="radio" name="radio" class="query" value="r1" checked />
    单选2<input type="radio" name="radio" class="query" value="r2"  checked/>
    单选3<input type="radio" name="radio" class="query" value="r3" />
     <h3>复选框</h3>
    复选框1<input type="checkbox" name="check" id="" class="query" value="c1" checked/>
    复选框2<input type="checkbox" name="check" id="" class="query" value="c2"  />
    复选框3<input type="checkbox" name="check" id="" class="query" value="c3"  checked/>
    <h3>search</h3>
    <input type="range" name="range" id="" class="query" value="" />
    <input type="color" name="color" id="" class="query" value="" />
    <h3>
        <button type="button" id="save">
            提交
        </button>
    </h3>

4. Here introduced JQ library.

4.1js block

Instructions for use: call the method when the incoming class name.

// packaging method, the data obtained form the form. Using this method, form elements must be present so property. 
        // EL: class name of the element. 
        function the getParameter (EL) {
             var obj = {}; 
            $ (EL) .each ( function (index, Item) {
                 // type judgment element 
                IF (item.type == "text" || item.type == " password "|| item.type ==" One-SELECT "|| item.type ==" Tel "||  
                    item.type ==" Search "|| item.type ==" Range "item.type = || = "Number" || item.type == "month The" ||  
                    item.type == "In Email" || item.type == "datetime-local" || item.type == "datetime" || Item. type == "date") {
                     // Get the value of the name, the value of the name data is transmitted to the back 
                    obj [$ ( the this ) .attr ( "name")] = $ ( the this ) .val (); 
                } the else  IF (item.type == "checkBox" ) {
                     var Stamp = to false ;
                     IF ($ ( the this !) .attr ( "name") && Stamp) { 
                        Stamp = to false ;
                         // acquired checkbox element 
                        var checkboxEl = $ ( " INPUT [name = "+ $ (Item) .attr ( 'name') +"]: the checked " );
                        if(checkboxEl) {
                             var checkboxArr = [];
                             // remove checkbox value 
                            checkboxEl.each ( function (IDX, ITM) { 
                                checkboxArr.push ($ (ITM) .val ()); 
                            }); 
                            obj [$ ( the this ) .attr ( "name")] = checkboxArr.join ( "," ); 
                        } 
                        
                    } 
                } the else  IF (item.type == "Radio" ) {
                     // Get the value of the selected radio button 
                    var radio_val=$("input[name="+$(item).attr('name')+"]:checked").val();
                    if(radio_val){
                        obj[$(item).attr("name")]=radio_val;
                    }
                }
            });
            return obj;
        }
        // 调用方法
        $("#save").click(function(){
        　　 var　parameter=getParameter(".query");
　　　　  　　console.log(parameter); 

　　　　　});
　　　　　　

Original link address: https://mp.weixin.qq.com/s/61VyfaYgPK-IjDq2m2-HKg