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 相关文章推荐
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
js对象的复制继承实例
Jan 10 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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 at(@)符号的用法简介
2009/07/11 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
python实现按任意键继续执行程序
2016/12/30 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
Django自定义manage命令实例代码
2018/02/11 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
Python简单I/O操作示例
2019/03/18 Python
Python学习笔记之装饰器
2020/08/06 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
保送生自荐信范文
2013/10/06 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
2014年科协工作总结
2014/12/09 职场文书
《检阅》教学反思
2016/02/22 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL