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(\"&\");
  } 
 };

<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;
 });