JS

原生JS获取表单得所有值

Posted by 石玉军 on 2018-07-26

今天碰到了一个没有使用任何框架的表单,大概包含20多个属性,简单抽取几个:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<from id="auditFrom">
<label>房龄:</label> <input name="houseAge" type="number" >
<label>权属情况:</label> <input name="houseOwner" type="text" >

<label>是否抵贷不一:</label>
<select name="mortgageLoan">
<option></option>
<option></option>
</select>

<label>抵押情况:</label>
<select name="mortgage">
<option>一抵</option>
<option>二抵</option>
<option>多抵</option>
</select>

<label>有无备用房信息:</label>
<select name="spareHouse">
<option></option>
<option></option>
</select>

<label>放款金额:</label> <input name="fkAmount" type="text" >

<label>备注:</label> <input name="remark" type="textarea" >
</form>

当我要获取它的值时发现如果我要是写上20多个document.getElementById也太low了吧,所以就自己动手封装了一个小方法

1
2
3
4
5
6
7
8
9
10
11
function(formId){
var from=document.getElementById(formId);
var tagElements=from.getElementsByClassName('el-input');//这里我把所有我要获取值得属性都使用了同一个类来标识;
var json={};
for (var j = 0; j < tagElements.length; j++){
var name=tagElements[j].name;//这里就是要获取得name属性,将此name属性作为json对象得key;
var value=tagElements[j].value;
json[name] = value; //注意这里必须要使用这种方式给json赋值。如果使用json.name=value得话你会发现你所有的key都是一个字符串name,而不是name代表的值
}
return json;
}

此方法最后返回的json就是整个表单里的值了