利用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 相关文章推荐
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 Javascript
在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中array_merge与array+array的区别
2013/06/21 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
javascript不同页面传值的改进版
2008/09/30 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
Python语言快速上手学习方法
2018/12/14 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
信息管理专业自荐书
2014/06/05 职场文书
校车安全责任书
2014/08/25 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
先进工作者申报材料
2014/12/23 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
Mysql 用户权限管理实现
2021/05/25 MySQL
Java 死锁解决方案
2022/05/11 Java/Android
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang