表单中单选、多选、选择框值的获取及表单的序列化
博客搬家了,欢迎大家关注,https://bobjin.com
总结了下在表单处理中单选、多选、选择框值的获取及表单的序列化,写成了一个对象。如下:
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
博客搬家了,欢迎大家关注,https://bobjin.com