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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
Javascript 继承实现例子
Aug 12 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
JS函数式编程实现XDM一
Jun 16 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 eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
Python类的用法实例浅析
2015/05/27 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
python如何快速拼接字符串
2020/10/28 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
什么是URL
2015/12/13 面试题
Delphi笔试题
2016/11/14 面试题
大学生物业管理求职信
2013/10/24 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS