利用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 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
常用的javascript function代码
May 23 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
javascript中this指向详解
Apr 23 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
JS如何生成动态列表
Sep 22 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的输入输出流
2007/02/14 PHP
php 发送带附件邮件示例
2014/01/23 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
五段实用的js高级技巧
2011/12/20 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
js创建对象的方式总结
2015/01/10 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
物业管理毕业生的自我评价
2014/02/17 职场文书
信访工作经验交流材料
2014/05/23 职场文书
安全责任书模板
2014/07/22 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
辞职信的写法
2015/02/27 职场文书