DIV CSS 佈局教程網

本文總結了下在表單處理中單選、多選、選擇框值的獲取及表單的序列化，寫成了一個對象。如下：

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

如果大家還想繼續學習的話，請參考以下專題《javascript選擇框操作》、《jquery選擇框操作》

以上就是針對js表單處理中單選、多選、選擇框值的獲取及表單的序列化封裝的對象，希望對打擊的學習有所幫助。