原生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 相关文章推荐
5个javascript的数字格式化函数分享
Dec 07 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 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 SQL防注入代码集合
2008/04/25 PHP
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
Python SQL查询并生成json文件操作示例
2018/08/17 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
python绘制玫瑰的实现代码
2020/03/02 Python
英国儿童图书网站:Scholastic
2017/03/26 全球购物
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
大学生职业生涯规划方案
2014/01/03 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
军人离婚协议书样本
2014/10/21 职场文书
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL