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 相关文章推荐
JQquery的一些使用心得分享
Aug 01 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
vuex vue简单使用知识点总结
Aug 29 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
第七节--类的静态成员
2006/11/16 PHP
php cookie的操作实现代码(登录)
2010/12/29 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
Javascript 解疑
2009/11/11 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
深入解析Vue 组件命名那些事
2017/07/18 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
深入浅析Python中的yield关键字
2018/01/24 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
PyQt5实现画布小程序
2020/05/30 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
思想政治教育专业个人求职信范文
2013/12/20 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
工商管理自荐书
2014/07/06 职场文书
骨干教师事迹材料
2014/12/17 职场文书
党校党性分析材料
2014/12/19 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
Minikube搭建Kubernetes集群
2022/03/31 Servers