JS之原生JS获取表单得所有值

版权声明：本文为博主原创文章，未经博主允许不得转载。博客源地址为zhixiang.org.cn https://blog.csdn.net/myFirstCN/article/details/80870892

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

<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了吧，所以就自己动手封装了一个小方法

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就是整个表单里的值了

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

<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了吧，所以就自己动手封装了一个小方法

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就是整个表单里的值了