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

 

 

今天碰到了一个没有使用任何框架的表单，大概包含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> 
<selectname="spareHouse"> <option>有</option> <option>无</option> </select> 
<label>放款金额：</label> <input name="fkAmount" type="text" > <label>备注：</label>
<inputname="remark" type="textarea" > </form> <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; } (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> 
<selectname="spareHouse"> <option>有</option> <option>无</option> </select> 
<label>放款金额：</label> <input name="fkAmount" type="text" > <label>备注：</label>
<inputname="remark" type="textarea" > </form> <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; } (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就是整个表单里的值了

• « 上一篇：数据库基础知识汇总！
• » 下一篇：阿里云短信验证码、短信服务SDK、Java使用方法