js获取form表单中name属性的值


Posted in Javascript onFebruary 27, 2019

在项目中因为动态表单无法确定标签name属性的值,因此需要即时获取以便进行存储。前端代码如下:

<div class="control-group">
<label class="control-label">土拨鼠常挖坑</label>
<form:input path="formAttribute1" class="input-xlarge" value="" name="测试1"/></div>
<form:input path="formAttribute1" class="input-xlarge" value="" name="测试2"/></div>
<form:input path="formAttribute1" class="input-xlarge" value="" name="测试3"/></div>

1、attr:$("#formAttribute1").attr("name");然后得到的值是formAttribute1(有没有前辈能给我讲讲为什么呀)

2、prop:问题同上

3、在上述两种方式都失败后,整个人不行了。最后找到了一个相对可行的方式,对class属性做修改,获取全部值,然后通过<c:foreach>标签获取this.value  和this.name,并放入map中。具体操作可参考如下代码(与上面代码区别在于class属性,在此处添加了property作为标识,此处可自定义名称)

<div class="control-group">
<label class="control-label">土拨鼠常挖坑</label>
<form:input path="formAttribute1" class="input-xlarge property" value="" name="测试1"/></div>
<form:input path="formAttribute1" class="input-xlarge property" value="" name="测试2"/></div>
<form:input path="formAttribute1" class="input-xlarge property" value="" name="测试3"/></div>

JS方法如下:

<script type="text/javascript">
   $("#btnSubmit").on("click",function () { //事件绑定btnSubmit是信息填写完毕提交处的按键
     var propertyMap= {};
     $(".property").each(function () {
       propertyMap[this.name] = this.value;
     });
    var propertyInfo= JSON.stringify(propertyMap);
     alert($("#propertyInfo")
   });
 </script>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
理解javascript闭包
Dec 15 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 #Javascript
jQuery each和js forEach用法比较
Feb 27 #jQuery
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 #Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 #Javascript
JavaScript中filter的用法实例分析
Feb 27 #Javascript
jQuery中each和js中forEach的区别分析
Feb 27 #jQuery
简单了解node npm cnpm的具体使用方法
Feb 27 #Javascript
You might like
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
Python装饰器的函数式编程详解
2015/02/27 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
Python 字典中的所有方法及用法
2020/06/10 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
大学生暑期实践感言
2014/02/26 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
企业年度评优方案
2014/06/02 职场文书
节水标语大全
2014/06/11 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
营销计划书范文
2015/01/17 职场文书
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
浅谈Vue的computed计算属性
2022/03/21 Vue.js