原生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 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
解决LayUI表单获取不到data的问题
Aug 20 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
React-vscode使用jsx语法的问题及解决方法
Jun 21 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实现框架(一)
2006/10/09 PHP
PHP分页显示制作详细讲解
2006/12/05 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
Yii框架form表单用法实例
2014/12/04 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
python返回数组的索引实例
2019/11/28 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
phpquery中文手册
2021/03/18 PHP
StubHub德国:购买和出售门票
2017/09/06 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
年终自我鉴定
2013/10/09 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
讲解员培训方案
2014/05/04 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js