利用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 相关文章推荐
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
js作用域及作用域链工作引擎
Jul 07 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图片等比例缩放
2015/07/28 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
Python动态加载模块的3种方法
2014/11/22 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python爬取指定微信公众号文章
2018/12/20 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
python 魔法函数实例及解析
2019/09/25 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
Python 使用office365邮箱的示例
2020/10/29 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
机械设备与数控技术专业求职信
2014/08/10 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
党员证明信
2015/06/19 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
Django migrate报错的解决方案
2021/05/20 Python
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
SpringBoot生成License的实现示例
2021/06/16 Java/Android
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers