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中Ajax的load方法详解
Jan 14 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
小程序实现发表评论功能
Jul 06 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 Javascript
浏览器兼容性问题大汇总
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
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
下载文件的点击数回填
2006/10/09 PHP
在IIS上安装PHP4.0正式版
2006/10/09 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
js获取class的所有元素
2013/03/28 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
python简单分割文件的方法
2015/07/30 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
python 判断网络连通的实现方法
2018/04/22 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
法国珠宝店:CLEOR
2017/01/29 全球购物
劳动竞赛活动总结
2014/05/05 职场文书
班训口号大全
2014/06/18 职场文书
python爬虫--selenium模块
2021/03/31 Python
Python的三个重要函数详解
2022/01/18 Python
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript