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 实现??打印?理
Apr 28 Javascript
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
JS倒计时两种实现方式代码实例
Jul 27 Javascript
ES6 解构赋值的原理及运用
May 25 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 使用memcached简单示例分享
2015/03/05 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
js left,right,mid函数
2008/06/10 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
Python实现图片滑动式验证识别方法
2017/11/09 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
python3的输入方式及多组输入方法
2018/10/17 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
python中p-value的实现方式
2019/12/16 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
幼儿园中班教学反思
2014/02/10 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
先进党组织事迹材料
2014/12/26 职场文书
小学运动会开幕词
2015/01/28 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
图神经网络GNN算法
2022/05/11 Python