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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 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
深入PHP5中的魔术方法详解
2013/06/17 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python 重定向获取真实url的方法
2018/05/11 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
django model object序列化实例
2020/03/13 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
Python的信号库Blinker用法详解
2020/12/31 Python
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
岗位职责风险防控
2014/02/18 职场文书
中学生检讨书范文
2014/11/03 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python