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与webservice的通信实现代码
Dec 25 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
node 版本切换的实现
Feb 02 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
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php生成二维码
2015/08/10 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
python发送伪造的arp请求
2014/01/09 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
Python探索之SocketServer详解
2017/10/28 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
详解爬虫被封的问题
2019/04/23 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
python 批量将中文名转换为拼音
2021/02/07 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
C#笔试题集合
2013/06/21 面试题
北大自主招生自荐信
2013/10/19 职场文书
校本教研工作制度
2014/01/22 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
领导接待方案
2014/03/13 职场文书
总经理助理的职责
2014/03/14 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
离婚财产处理协议书
2014/09/30 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
Element实现动态表格的示例代码
2021/08/02 Javascript
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记