js获取form表单所有数据的简单方法


Posted in Javascript onAugust 18, 2016

在HTML中用js获取通过GET、POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值。

针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为公用方法直接调用。可以提高大家的开发效率。

Js代码

<script type="text/javascript"> 
 
//获取指定form中的所有的<input>对象  
function getElements(formId) {  
  var form = document.getElementById(formId);  
  var elements = new Array();  
  var tagElements = form.getElementsByTagName('input');  
  for (var j = 0; j < tagElements.length; j++){ 
     elements.push(tagElements[j]); 
 
  } 
  return elements;  
}  
 
//获取单个input中的【name,value】数组 
function inputSelector(element) {  
 if (element.checked)  
   return [element.name, element.value];  
}  
   
function input(element) {  
  switch (element.type.toLowerCase()) {  
   case 'submit':  
   case 'hidden':  
   case 'password':  
   case 'text':  
    return [element.name, element.value];  
   case 'checkbox':  
   case 'radio':  
    return inputSelector(element);  
  }  
  return false;  
}  
 
//组合URL 
function serializeElement(element) {  
  var method = element.tagName.toLowerCase();  
  var parameter = input(element);  
  
  if (parameter) {  
   var key = encodeURIComponent(parameter[0]);  
   if (key.length == 0) return;  
  
   if (parameter[1].constructor != Array)  
    parameter[1] = [parameter[1]];  
     
   var values = parameter[1];  
   var results = [];  
   for (var i=0; i<values.length; i++) {  
    results.push(key + '=' + encodeURIComponent(values[i]));  
   }  
   return results.join('&');  
  }  
 }  
 
//调用方法   
function serializeForm(formId) {  
  var elements = getElements(formId);  
  var queryComponents = new Array();  
  
  for (var i = 0; i < elements.length; i++) {  
   var queryComponent = serializeElement(elements[i]);  
   if (queryComponent)  
    queryComponents.push(queryComponent);  
  }  
  
  return queryComponents.join('&'); 
}  
 
</script>

Js代码

function getFormInfo(){ 
  var params = serializeForm('login'); 
  alert(params); 
}

Html代码

<body>       
<form id="login" name="login" method="post" action="result.jsp"> 
<input name="user" type="text"/> 
<input name="sex" type="radio" value="man"/> 
<input name="sex" type="radio" value="woman"/> 
interest:<input type="checkbox" name="interest" value="piu">PIU <input type="checkbox" name="interest" value="dss">DSS <input type="checkbox" name="interest" value="ddr">DDR<br>  
<input type="hidden" name="from" value="welcome"><br>  
<input type="button" name="submit" value="submit" onclick="getFormInfo();">  
</form> 
</body>

html:

js获取form表单所有数据的简单方法

url:

js获取form表单所有数据的简单方法

以上这篇js获取form表单所有数据的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 #Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 #Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 #Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 #Javascript
AngularJS 工作原理详解
Aug 18 #Javascript
js H5 canvas投篮小游戏
Aug 18 #Javascript
jQuery过滤选择器经典应用
Aug 18 #Javascript
You might like
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
jquery 学习之一 对象访问
2010/11/23 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
python类型强制转换long to int的代码
2013/02/10 Python
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
如何使用python代码操作git代码
2020/02/29 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
应届毕业生应聘自荐信范文
2014/02/26 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
立春观后感
2015/06/18 职场文书
教师远程培训心得体会
2016/01/09 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
Django drf请求模块源码解析
2021/06/08 Python
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL