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学习资源站点
Aug 29 Javascript
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
Vue项目移动端滚动穿透问题的实现
May 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 adodb介绍
2009/03/19 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
Python线程中对join方法的运用的教程
2015/04/09 Python
python中使用序列的方法
2015/08/03 Python
Python中functools模块函数解析
2017/03/12 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
python 多线程串行和并行的实例
2019/02/22 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
2014年保卫工作总结
2014/12/05 职场文书
入党政审材料范文
2014/12/24 职场文书
办公室主任岗位职责
2015/01/31 职场文书
2015年路政工作总结
2015/05/22 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
部门主管竞聘书
2015/09/15 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
解析Java异步之call future
2021/06/14 Java/Android
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android