原生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 相关文章推荐
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 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注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
python常见排序算法基础教程
2017/04/13 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python机器人行走步数问题的解决
2018/01/29 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
对Python中plt的画图函数详解
2018/11/07 Python
postman和python mock测试过程图解
2020/02/22 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
Python中pass的作用与使用教程
2020/11/13 Python
Python try except else使用详解
2021/01/12 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
技校生自我鉴定
2013/12/08 职场文书
化学教师自荐信范文
2013/12/28 职场文书
高二物理教学反思
2014/02/08 职场文书
员工安全责任书范本
2014/07/24 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript