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

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

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  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  0) {
       arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
      } 
    }
   }
   return arr.join("&");
  } 
 };

一个简单的demo：

姓名：
性别： 男 女
爱好： 篮球 足球 乒乓球 羽毛球
年级： 一年级 二年级 三年级
其他：

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 + "
";
  html += formUtil.getRadioValue(form.elements['sex']) + "
";
  html += formUtil.getCheckboxValue(form.elements['hobby']) + "
";
  html += formUtil.getSelectValue(form.elements['class']) + "
";
  html += form.elements['other'].value + "
";
  html += decodeURIComponent(formUtil.serialize(form)) + "
";
  output.innerHTML = html;
 });

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

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