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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
摘自百度的图片轮换效果代码
Nov 19 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 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和XSL stylesheets转换XML文档
2006/10/09 PHP
ADODB类使用
2006/11/25 PHP
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
JS关键字变色实现思路及代码
2013/02/21 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
Vuex简单入门
2017/04/19 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
用Python编写简单的定时器的方法
2015/05/02 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
python实现处理mysql结果输出方式
2020/04/09 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
创业计划书撰写原则
2014/01/25 职场文书
九年级语文教学反思
2014/02/04 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android