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 相关文章推荐
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
vue v-on监听事件详解
May 17 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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 翻页 实例代码
2009/08/07 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
python实现的各种排序算法代码
2013/03/04 Python
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
Python中的高级函数map/reduce使用实例
2015/04/13 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
使用Python实现画一个中国地图
2019/11/23 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
python unichr函数知识点总结
2020/12/16 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
深圳茁壮笔试题
2015/05/28 面试题
工作作风建设心得体会
2014/10/22 职场文书
就业导师推荐信范文
2015/03/27 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
爱护公物主题班会
2015/08/17 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
pandas提升计算效率的一些方法汇总
2021/05/30 Python
Windows server 2016服务器基本设置
2022/08/14 Servers