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 !!的作用
Dec 04 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
Vue中的methods、watch、computed的区别
Nov 26 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开发中四种查询返回结果分析
2011/01/02 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
自动更新作用
2006/10/08 Javascript
javascript入门·对象属性方法大总结
2007/10/01 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
python如何实现int函数的方法示例
2018/02/19 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
python文件选择对话框的操作方法
2019/06/27 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
门卫工作岗位职责
2013/12/17 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
个人自荐书怎么写
2015/03/26 职场文书
SQL语句多表联合查询的方法示例
2022/04/18 MySQL