js获取form表单数据

朱雀 2020-04-17 09:03 985阅读 0赞

1、有的时候想偷点懒，页面上有大量的表单提交数据，每次单独获取都比较麻烦。代码冗余度也比较多，因此封装了一个方法。

2、表单元素必须要有name属性，name属性是向后端提交的字段数据。

3、html代码

```
<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、此处引入了JQ库。

4.1、js代码块

使用说明：调用方法的时候传入class名称即可。

```javascript
// 封装方法，获取到form表单的数据。使用此方法，表单元素必须存在那么属性。
//el:元素的class名称。
function getParameter(el) {
    var obj = {};
    $(el).each(function (index, item) {
        // 判断元素的类型
        if (item.type == "text" || item.type == "password" || item.type == "select-one" || item.type == "tel" ||
            item.type == "search" || item.type == "range" || item.type == "number" || item.type == "month" ||
            item.type == "email" || item.type == "datetime-local" || item.type == "datetime" || item.type == "date" ||
            item.type == "color") {
            //获取到name的值,name的值就是向后台传递的数据
            obj[$(this).attr("name")] = $(this).val();
        } else if (item.type == "checkbox") {
            var stamp = false;
            if ($(this).attr("name") && !stamp) {
                stamp = false;
                // 获取到复选框选中的元素
                var checkboxEl = $("input[name=" + $(item).attr('name') + "]:checked");
                if (checkboxEl) {
                    var checkboxArr = [];
                    // 取出复选框选中的值
                    checkboxEl.each(function (idx, itm) {
                        checkboxArr.push($(itm).val());
                    });
                    obj[$(this).attr("name")] = checkboxArr.join(",");
                }
            }
        } else if (item.type == "radio") {
            // 获取到单选框选中的值
            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);　
});
```