var formUtil = {
  // 獲取單選按鈕的值，如有沒(méi)有選的話返回null
  // elements為radio類的集合的引用
  getRadioValue:function(elements) {
   var value = null; // null表示沒(méi)有選中項(xiàng)
   // 非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;
  },
  
  // 獲取多選按鈕的值，如有沒(méi)有選的話返回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表示沒(méi)有選中項(xiàng)
   } 
  },
  
  // 獲取下拉框的值
  // element為select元素的引用
  getSelectValue:function(element) {
   if(element.selectedIndex == -1) {
    return null; // 沒(méi)有選中的項(xiàng)時(shí)返回null
   };
   if(element.multiple) {
    // 多項(xiàng)選擇
    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{
    // 單項(xiàng)選擇
    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];
    // 不發(fā)送禁用的表單字段
    if(field.disabled) {
     continue;
    }
    switch (field.type) {
     // 選擇框的處理
     case "select-one":
     case "select-multiple":
      arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(this.getSelectValue(field)));
      break;
     
     // 不發(fā)送下列類型的表單字段 
     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>
  愛(ài)好：
  <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 />
  年級(jí)：
  <select name="class" multiple>
   <option value="一年級(jí)">一年級(jí)</option>
   <option value="二年級(jí)">二年級(jí)</option>
   <option value="三年級(jí)">三年級(jí)</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;
 });