表单中单选、多选、选择框值的获取及表单的序列化

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

  1 　　var formUtil = {
  2         // 获取单选按钮的值，如有没有选的话返回null
  3         // elements为radio类的集合的引用
  4         getRadioValue:function(elements) {
  5             var value = null; // null表示没有选中项
  6             // 非IE浏览器
  7             if(elements.value != undefined && elements.value != ‘‘) {
  8                 value = elements.value;
  9             } else {
 10                 // IE浏览器
 11                 for(var i = 0, len = elements.length; i < len; i++ ) {
 12                     if(elements[i].checked) {
 13                         value = elements[i].value;
 14                         break;
 15                     }
 16                 }
 17             }
 18             return value;
 19         },
 20
 21         // 获取多选按钮的值，如有没有选的话返回null
 22         // elements为checkbox类型的input集合的引用
 23         getCheckboxValue:function(elements) {
 24             var arr = new Array();
 25             for(var i = 0, len = elements.length; i < len; i++ ) {
 26                 if(elements[i].checked) {
 27                     arr.push(elements[i].value);
 28                 }
 29             }
 30             if(arr.length > 0) {
 31                 return arr.join(‘,‘);
 32             } else {
 33                 return null; // null表示没有选中项
 34             }
 35         },
 36
 37         // 获取下拉框的值
 38         // element为select元素的引用
 39         getSelectValue:function(element) {
 40             if(element.selectedIndex == -1) {
 41                 return null; // 没有选中的项时返回null
 42             };
 43             if(element.multiple) {
 44                 // 多项选择
 45                 var arr = new Array(), options = element.options;
 46                 for(var i = 0, len = options.length; i < len; i++) {
 47                     if(options[i].selected) {
 48                         arr.push(options[i].value);
 49                     }
 50                 }
 51                 return arr.join(",");
 52             }else{
 53                 // 单项选择
 54                 return element.options[element.selectedIndex].value;
 55             }
 56         },
 57
 58         // 序列化
 59         // form为form元素的引用
 60         serialize:function(form) {
 61             var arr = new Array(),
 62             elements = form.elements,
 63             checkboxName = null;
 64             for(var i = 0, len = elements.length; i < len; i++ ) {
 65                 field = elements[i];
 66                 // 不发送禁用的表单字段
 67                 if(field.disabled) {
 68                     continue;
 69                 }
 70                 switch (field.type) {
 71                     // 选择框的处理
 72                     case "select-one":
 73                     case "select-multiple":
 74                         arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(this.getSelectValue(field)));
 75                         break;
 76
 77                     // 不发送下列类型的表单字段
 78                     case undefined :
 79                     case "button" :
 80                     case "submit" :
 81                     case "reset" :
 82                     case "file" :
 83                         break;
 84
 85                     // 单选、多选和其他类型的表单处理
 86                     case "checkbox" :
 87                         if(checkboxName == null) {
 88                             checkboxName = field.name;
 89                             arr.push(encodeURIComponent(checkboxName) + "=" + encodeURIComponent(this.getCheckboxValue(form.elements[checkboxName])));
 90                         }
 91                         break;
 92                     case "radio" :
 93                         if(!field.checked) {
 94                             break;
 95                         }
 96                     default:
 97                         if(field.name.length > 0) {
 98                             arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
 99                         }
100                 }
101             }
102             return arr.join("&");
103         }
104     };

一个简单的demo：

 1　　 <form action="test_php.php" id="form1" name="form1" method="post" enctype="multipart/form-data">
 2         姓名：<input name="name" type="text" tabindex="1" /> <br>
 3         性别：<input name="sex" type="radio" value="男"/> 男
 4              <input name="sex" type="radio" value="女" /> 女 <br>
 5         爱好：
 6         <input name="hobby" type="checkbox" value="篮球" /> 篮球
 7         <input name="hobby" type="checkbox" value="足球" /> 足球
 8         <input name="hobby" type="checkbox" value="乒乓球" /> 乒乓球
 9         <input name="hobby" type="checkbox" value="羽毛球" /> 羽毛球
10         <br />
11         年级：
12         <select name="class" multiple>
13             <option value="一年级">一年级</option>
14             <option value="二年级">二年级</option>
15             <option value="三年级">三年级</option>
16         </select>
17         <br />
18          其他：
19          <br />
20          <textarea name="other" rows="5" cols="30" tabindex="2"></textarea>
21          <br />
22          <input type="reset" value="重置" />
23          <input type="submit" value="提交" />
24     </form>
25     <div id="output"></div>

 1　　 var form = document.getElementById("form1"),
 2     output = document.getElementById("output");
 3
 4     // 自定义的提交事件
 5     EventUtil.addEventListener(form,"submit", function(event) {
 6         event = EventUtil.getEvent(event);
 7         EventUtil.preventDefault(event);
 8         var html = "";
 9         html += form.elements[‘name‘].value + "<br>";
10         html += formUtil.getRadioValue(form.elements[‘sex‘]) + "<br>";
11         html += formUtil.getCheckboxValue(form.elements[‘hobby‘]) + "<br>";
12         html += formUtil.getSelectValue(form.elements[‘class‘]) + "<br>";
13         html += form.elements[‘other‘].value + "<br>";
14         html += decodeURIComponent(formUtil.serialize(form)) + "<br>";
15         output.innerHTML = html;
16     });

PS:代码出现的EventUtil在”跨浏览器的事件侦听器和事件对象“这篇文章有介绍。链接：http://www.cnblogs.com/yuanke/p/5045821.html