原生js实现获取form表单数据代码实例


Posted in Javascript onMarch 27, 2019

本文实例为大家分享了原生js实现获取form表单数据的具体代码,供大家参考,具体内容如下

//获取指定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]); 
  } 
  var tagElements = form.getElementsByTagName('select'); 
  for (var j = 0; j < tagElements.length; j++){ 
    elements.push(tagElements[j]); 
  } 
  var tagElements = form.getElementsByTagName('textarea'); 
  for (var j = 0; j < tagElements.length; j++){ 
    elements.push(tagElements[j]); 
  }
  return elements; 
} 
//组合URL 
function serializeElement(element) { 
  var method = element.tagName.toLowerCase(); 
  var parameter; 
  if(method == 'select'){
    parameter = [element.name, element.value]; 
  }
  switch (element.type.toLowerCase()) { 
    case 'submit': 
    case 'hidden': 
    case 'password': 
    case 'text':
    case 'date':
    case 'textarea': 
       parameter = [element.name, element.value];
       break;
    case 'checkbox': 
    case 'radio': 
      if (element.checked){
        parameter = [element.name, element.value]; 
      }
      break;    
  } 
  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('&'); 
}

最后通过serializeForm(formId);输入form的id名称即可实现,返回数据为

id=1&title=%E6%B4%BB%E5%8A%A8&time=2017-07-10&status=1&importance=0&desc=%E5%9C%A8%E4%BA%8C%E6%A5%BC%E5%8A%9E%E5%85%AC%E5%AE%A4%E5%BC%80%E4%BC%9A%EF%BC%8C%E4%B8%80%E7%82%B9%E9%92%9F

以上所述是小编给大家介绍的原生js实现获取form表单数据详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
JQueryDOM之样式操作
Mar 27 #jQuery
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 #Javascript
Node.js 多线程完全指南总结
Mar 27 #Javascript
浅谈JS和jQuery的区别
Mar 27 #jQuery
Nginx设置为Node.js的前端服务器方法总结
Mar 27 #Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 #Javascript
详解vue在项目中使用百度地图
Mar 26 #Javascript
You might like
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
nodejs win7下安装方法
2012/05/24 NodeJs
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
python中的yield使用方法
2014/02/11 Python
Python FTP操作类代码分享
2014/05/13 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
python pyheatmap包绘制热力图
2018/11/09 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
python的sys.path模块路径添加方式
2020/03/09 Python
Python分类测试代码实例汇总
2020/07/23 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
六道php面试题附答案
2014/06/05 面试题
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
岗位竞聘书范文
2014/03/31 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS