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 相关文章推荐
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
js倒计时显示实例
2016/12/11 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
Vue中插入HTML代码的方法
2018/09/21 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
Python 字典与字符串的互转实例
2017/01/13 Python
python实现彩色图转换成灰度图
2019/01/15 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
python实现磁盘日志清理的示例
2020/11/05 Python
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
保险公司年会主持词
2014/03/22 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
教师党员个人整改措施
2014/10/27 职场文书
详解Python flask的前后端交互
2022/03/31 Python
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js
Redis批量生成数据的实现
2022/06/05 Redis
python热力图实现的完整实例
2022/06/25 Python