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 面向对象编程(一) 封装
Aug 28 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 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的PSR规范中文版
2013/09/28 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
简单实现PHP留言板功能
2016/12/21 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
Python制作数据导入导出工具
2015/07/31 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
介绍下Java中==和equals的区别
2013/09/01 面试题
J2EE系统只能是基于web
2015/09/08 面试题
幼儿园元旦活动感言
2014/03/02 职场文书
青春励志演讲稿
2014/04/29 职场文书
端午节演讲稿
2014/05/23 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
2015年服务员工作总结
2015/04/08 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
mysql 索引合并的使用
2021/08/30 MySQL
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS