原生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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
JavaScript布尔运算符原理使用解析
May 06 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 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的变量总结 新手推荐
2011/04/18 PHP
深入PHP异步执行的详解
2013/06/03 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
php取出数组单个值的方法
2018/03/12 PHP
php-app开发接口加密详解
2018/04/18 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
python中pygame模块用法实例
2014/10/09 Python
Python实现一个简单的MySQL类
2015/01/07 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
python 命名规范知识点汇总
2020/02/14 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
求职信格式范本
2013/11/15 职场文书
应用英语专业自荐信
2014/01/26 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
实习护士自荐信
2014/06/21 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
初中毕业感言300字
2015/07/31 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android