原生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 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
js实现简单计算器
Nov 22 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
使用p5.js临摹动态图片
Nov 04 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 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编程效率 引入缓存机制提升性能
2010/02/15 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
python模块之StringIO使用示例
2015/04/08 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
Python使用type动态创建类操作示例
2020/02/29 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
便利店投资的创业计划书
2014/01/12 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
物理力学求职信
2014/02/18 职场文书
企业文化口号
2014/06/12 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
同事去世追悼词
2015/06/23 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技