js表单处理中单选、多选、选择框值的获取及表单的序列化


Posted in Javascript onMarch 08, 2016

本文总结了下在表单处理中单选、多选、选择框值的获取及表单的序列化,写成了一个对象。如下:

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;
 });

如果大家还想继续学习的话,请参考以下专题《javascript选择框操作》《jquery选择框操作》

以上就是针对js表单处理中单选、多选、选择框值的获取及表单的序列化封装的对象,希望对打击的学习有所帮助。

Javascript 相关文章推荐
jQuery表格行换色的三种实现方法
Jun 27 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 #Javascript
Angularjs material 实现搜索框功能
Mar 08 #Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 #Javascript
三种Node.js写文件的方式
Mar 08 #Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 #Javascript
理解javascript正则表达式
Mar 08 #Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 #Javascript
You might like
php简单实现MVC
2015/02/05 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
jquery异步循环获取功能实现代码
2010/09/19 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
token 机制和实现方式
2020/12/15 Javascript
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
解决python运行启动报错问题
2020/06/01 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
师范应届生求职信
2013/11/15 职场文书
个人汇报材料范文
2014/12/30 职场文书
顶岗实习计划书
2015/01/16 职场文书
写给父母的感谢信
2015/01/22 职场文书
给老婆的检讨书
2015/01/27 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python