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 相关文章推荐
javascript比较两个日期相差天数的方法
Jul 24 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
用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中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
python打开网页和暂停实例
2014/09/30 Python
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python实现图片添加文字
2019/11/26 Python
Python表达式的优先级详解
2020/02/18 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
python如何调用字典的key
2020/05/25 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
捷克玩具商店:Bambule
2019/02/23 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
秋季运动会加油稿200字
2014/01/11 职场文书
妇女工作先进事迹
2014/08/17 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
PHP正则表达式之RCEService回溯
2022/04/11 PHP
分享python函数常见关键字
2022/04/26 Python