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

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。博客源地址为zhixiang.org.cn https://blog.csdn.net/myFirstCN/article/details/80870892 ...
版权声明:本文为博主原创文章,未经博主允许不得转载。博客源地址为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就是整个表单里的值了

相关文章
|
21天前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
24 1
|
29天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
41 3
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
31 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
2月前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
53 4
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
3月前
|
移动开发 JavaScript 前端开发
js之操作表单 | 12-4
js之操作表单 | 12-4
|
3月前
|
移动开发 前端开发 JavaScript
JavaScript 表单
JavaScript 表单
29 9
|
3月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
42 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
3月前
|
人工智能 前端开发 JavaScript
react js 处理表单( form )的2个例子
react js 处理表单( form )的2个例子
|
4月前
|
大数据 数据处理 分布式计算
JSF 逆袭大数据江湖!看前端框架如何挑战数据处理极限?揭秘这场技术与勇气的较量!
【8月更文挑战第31天】在信息爆炸时代,大数据已成为企业和政府决策的关键。JavaServer Faces(JSF)作为标准的 Java Web 框架,如何与大数据技术结合,高效处理大规模数据集?本文探讨大数据的挑战与机遇,介绍 JSF 与 Hadoop、Apache Spark 等技术的融合,展示其实现高效数据存储和处理的潜力,并提供示例代码,助您构建强大的大数据系统。
51 0