js表单中选择框值的获取及表单的序列化


Posted in Javascript onDecember 17, 2015

本文特意为js表单中选择框值的获取及表单的序列化做了下总结,写成了一个对象,分享给大家,欢迎大家学习。

var formUtil = {
  // 获取单选按钮的值,如有没有选的话返回null
  // elements为radio类的集合的引用
  getRadioValue:function(elements) {
   var value = null; // null表示没有选中项
   // 非IE浏览器
   if(elements.value != undefined && elements.value != '') {
    value = elements.value;
   } else {
    // IE浏览器
    for(var i = 0, len = elements.length; i < len; i++ ) {
     if(elements[i].checked) {
      value = elements[i].value;
      break;
     }
    }
   }
   return value;
  },
  
  // 获取多选按钮的值,如有没有选的话返回null
  // elements为checkbox类型的input集合的引用
  getCheckboxValue:function(elements) {
   var arr = new Array();
   for(var i = 0, len = elements.length; i < len; i++ ) {
    if(elements[i].checked) {
     arr.push(elements[i].value);
    }
   }
   if(arr.length > 0) {
    return arr.join(',');
   } else {
    return null; // null表示没有选中项
   } 
  },
  
  // 获取下拉框的值
  // element为select元素的引用
  getSelectValue:function(element) {
   if(element.selectedIndex == -1) {
    return null; // 没有选中的项时返回null
   };
   if(element.multiple) {
    // 多项选择
    var arr = new Array(), options = element.options;
    for(var i = 0, len = options.length; i < len; i++) {
     if(options[i].selected) {
      arr.push(options[i].value);
     }
    }
    return arr.join(",");
   }else{
    // 单项选择
    return element.options[element.selectedIndex].value;
   }
  },
  
  // 序列化
  // form为form元素的引用
  serialize:function(form) {
   var arr = new Array(),
   elements = form.elements,
   checkboxName = null;
   for(var i = 0, len = elements.length; i < len; i++ ) {
    field = elements[i];
    // 不发送禁用的表单字段
    if(field.disabled) {
     continue;
    }
    switch (field.type) {
     // 选择框的处理
     case "select-one":
     case "select-multiple":
      arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(this.getSelectValue(field)));
      break;
     
     // 不发送下列类型的表单字段 
     case undefined :
     case "button" :
     case "submit" :
     case "reset" :
     case "file" :
      break;
     
     // 单选、多选和其他类型的表单处理  
     case "checkbox" :
      if(checkboxName == null) {
       checkboxName = field.name;
       arr.push(encodeURIComponent(checkboxName) + "=" + encodeURIComponent(this.getCheckboxValue(form.elements[checkboxName])));
      }
      break;
     case "radio" :
      if(!field.checked) {
       break;
      }
     default:
      if(field.name.length > 0) {
       arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
      } 
    }
   }
   return arr.join("&");
  } 
 };

一个简单的demo:

<form action="test_php.php" id="form1" name="form1" method="post" enctype="multipart/form-data">
  姓名:<input name="name" type="text" tabindex="1" /> <br>
  性别:<input name="sex" type="radio" value="男"/> 男 
    <input name="sex" type="radio" value="女" /> 女 <br>
  爱好:
  <input name="hobby" type="checkbox" value="篮球" /> 篮球
  <input name="hobby" type="checkbox" value="足球" /> 足球
  <input name="hobby" type="checkbox" value="乒乓球" /> 乒乓球
  <input name="hobby" type="checkbox" value="羽毛球" /> 羽毛球
  <br />
  年级:
  <select name="class" multiple>
   <option value="一年级">一年级</option>
   <option value="二年级">二年级</option>
   <option value="三年级">三年级</option>
  </select>
  <br />
   其他:
   <br />
   <textarea name="other" rows="5" cols="30" tabindex="2"></textarea>
   <br />
   <input type="reset" value="重置" />
   <input type="submit" value="提交" />
 </form>
 <div id="output"></div>
var form = document.getElementById("form1"),
 output = document.getElementById("output");
 
 // 自定义的提交事件
 EventUtil.addEventListener(form,"submit", function(event) {
  event = EventUtil.getEvent(event);
  EventUtil.preventDefault(event);
  var html = "";
  html += form.elements['name'].value + "<br>";
  html += formUtil.getRadioValue(form.elements['sex']) + "<br>";
  html += formUtil.getCheckboxValue(form.elements['hobby']) + "<br>";
  html += formUtil.getSelectValue(form.elements['class']) + "<br>";
  html += form.elements['other'].value + "<br>";
  html += decodeURIComponent(formUtil.serialize(form)) + "<br>";
  output.innerHTML = html;
 });

代码出现的EventUtil在这篇文章有介绍: 《js跨浏览器的事件侦听器和事件对象的使用方法》

以上就是对js表单中选择框值的获取及表单的序列化的详细介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
微信小程序 教程之模板
Oct 18 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
浏览器兼容性问题大汇总
Dec 17 #Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 #Javascript
js调出上下文菜单的实例
Dec 17 #Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 #Javascript
JSONObject使用方法详解
Dec 17 #Javascript
JS实现alert中显示换行的方法
Dec 17 #Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 #Javascript
You might like
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
图片之间的切换
2006/06/26 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
python如何将图片转换为字符图片
2020/08/19 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
五一手机促销方案
2014/03/08 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
法院信息化建设方案
2014/05/21 职场文书
奖金申请报告模板
2015/05/15 职场文书
红色电影观后感
2015/06/18 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers