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];    // 不發(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>  愛好：  <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; });