你的位置:首页 > Java教程

[Java教程]表单中单选、多选、选择框值的获取及表单的序列化


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

 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