利用JS如何获取form表单数据


Posted in Javascript onDecember 19, 2019

前言

本文主要给大家介绍的是关于利用JS获取form表单数据的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧

方法如下:

1.有的时候想偷点懒,页面上有大量的表单提交数据,每次单独获取都比较麻烦。代码冗余度也比较多,因此封装了一个方法。

2. 表单元素必须要有name属性,name属性是向后端提交的字段数据。

3.html代码

<h3>下拉框</h3>
 <select name="sel" id="sel" class="query">
  <option value ="sel-1">sel-1</option>
  <option value ="sel-2">sel-2</option>
 </select>
 <h3>输入框</h3>
 <input type="text" name="text1" class="query" value="hello" />
 <input type="text" name="text2" class="query" value="word" />
 <h3>密码框</h3>
 <input type="password" name="password" class="query" value="123456" />
 <h3>单选框</h3>
 单选1<input type="radio" name="radio" class="query" value="r1" checked />
 单选2<input type="radio" name="radio" class="query" value="r2" checked/>
 单选3<input type="radio" name="radio" class="query" value="r3" />
  <h3>复选框</h3>
 复选框1<input type="checkbox" name="check" id="" class="query" value="c1" checked/>
 复选框2<input type="checkbox" name="check" id="" class="query" value="c2" />
 复选框3<input type="checkbox" name="check" id="" class="query" value="c3" checked/>
 <h3>search</h3>
 <input type="range" name="range" id="" class="query" value="" />
 <input type="color" name="color" id="" class="query" value="" />
 <h3>
  <button type="button" id="save">
   提交
  </button>
 </h3>

4.此处引入了JQ库。

4.1js代码块

使用说明:调用方法的时候传入class名称即可。

// 封装方法,获取到form表单的数据。使用此方法,表单元素必须存在那么属性。
  //el:元素的class名称。
  function getParameter(el){
   var obj={};
   $(el).each(function(index,item){
    // 判断元素的类型
    if(item.type=="text" || item.type=="password" || item.type=="select-one" || item.type=="tel" || 
     item.type=="search" || item.type=="range" || item.type=="number" || item.type=="month" || 
     item.type=="email" || item.type=="datetime-local" || item.type=="datetime" || item.type=="date" || 
     item.type=="color"){
     //获取到name的值,name的值就是向后台传递的数据
     obj[$(this).attr("name")]=$(this).val();
    }else if(item.type=="checkbox"){
     var stamp=false;
     if($(this).attr("name") && !stamp){
      stamp=false;
      // 获取到复选框选中的元素
      var checkboxEl=$("input[name="+$(item).attr('name')+"]:checked");
      if(checkboxEl){
       var checkboxArr=[];
       // 取出复选框选中的值
       checkboxEl.each(function(idx,itm){
        checkboxArr.push($(itm).val());
       });
       obj[$(this).attr("name")]=checkboxArr.join(",");
      }
      
     }
    }else if(item.type=="radio"){
     // 获取到单选框选中的值
     var radio_val=$("input[name="+$(item).attr('name')+"]:checked").val();
     if(radio_val){
      obj[$(item).attr("name")]=radio_val;
     }
    }
   });
   return obj;
  }
  // 调用方法
  $("#save").click(function(){
   var parameter=getParameter(".query");


 
console.log(parameter); 


 });

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
在Vue项目中使用Typescript的实现
Dec 19 #Javascript
JS数据类型STRING使用实例解析
Dec 18 #Javascript
JS精确判断数据类型代码实例
Dec 18 #Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 #Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 #Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 #Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 #Javascript
You might like
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
简单实现php上传文件功能
2017/09/21 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
python书籍信息爬虫实例
2018/03/19 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
python删除文本中行数标签的方法
2018/05/31 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
医学生就业推荐表自我鉴定
2014/03/26 职场文书
公司员工离职感言
2015/08/03 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
vue动态绑定style样式
2022/04/20 Vue.js
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android