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 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 Javascript
vue组件vue-esign实现电子签名
Apr 21 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
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
python pdb调试方法分享
2014/01/21 Python
使用Python生成url短链接的方法
2015/05/04 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
聊聊python中的循环遍历
2020/09/07 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
汽车机修工岗位职责
2014/03/06 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
施工安全协议书范本
2014/09/26 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server