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 相关文章推荐
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
用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 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
php二维数组排序详解
2013/11/06 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
jquery实现拖动效果
2016/08/10 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
布同自制Python函数帮助查询小工具
2011/03/13 Python
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
详解Python:面向对象编程
2019/04/10 Python
Django中URL的参数传递的实现
2019/08/04 Python
python数据归一化及三种方法详解
2019/08/06 Python
解决Mac下使用python的坑
2019/08/13 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
党组织公开承诺书
2014/03/29 职场文书
优秀语文教师事迹
2014/05/18 职场文书
2015年路政工作总结
2015/05/22 职场文书
民事诉讼代理词
2015/05/25 职场文书
标枪加油稿
2015/07/22 职场文书
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers