js表單處理中單選、多選、選擇框值的獵取及表單的序列化_

1、js表單處理中單選、多選、選擇框值的獵取及表單的序列化_ 本文總結(jié)了下在表單處理中單選、多選、選擇框值的獵取及表單的序列化，寫(xiě)成了一個(gè)對(duì)象。如下： var formUtil = / 獵取單選按鈕的值，如有沒(méi)有選的話返回null / elements為radio類(lèi)的集合的引用 getRadioValue:function(elements) var value = null; / null表示沒(méi)有選中項(xiàng) / 非IE掃瞄器 if(elements.value != undefined elements.value != ) value = elements.value; else / IE掃瞄器

2、for(var i = 0, len = elements.length; i len; i+ ) if(elementsi.checked) value = elementsi.value; break; return value; , / 獵取多選按鈕的值，如有沒(méi)有選的話返回null / elements為checkbox類(lèi)型的input集合的引用 getCheckboxValue:function(elements) var arr = new Array(); for(var i = 0, len = elements.length; i len; i+ ) if(elementsi.

3、checked) arr.push(elementsi.value); if(arr.length 0) return arr.join(,); else return null; / null表示沒(méi)有選中項(xiàng) , / 獵取下拉框的值 / element為select元素的引用 getSelectValue:function(element) if(element.selectedIndex = -1) return null; / 沒(méi)有選中的項(xiàng)時(shí)返回null ; if(element.multiple) / 多項(xiàng)選擇 var arr = new Array(), options = eleme

4、nt.options; for(var i = 0, len = options.length; i len; i+) if(optionsi.selected) arr.push(optionsi.value); return arr.join(,); else / 單項(xiàng)選擇 return element.optionselement.selectedIndex.value; , / 序列化 / form為form元素的引用 serialize:function(form) var arr = new Array(), elements = form.elements, checkboxNa

5、me = null; for(var i = 0, len = elements.length; i len; i+ ) field = elementsi; / 不發(fā)送禁用的表單字段 if(field.disabled) continue; switch (field.type) / 選擇框的處理 case select-one: case select-multiple: arr.push(encodeURIComponent() + = + encodeURIComponent(this.getSelectValue(field); break; / 不發(fā)送下列類(lèi)型的

6、表單字段 case undefined : case button : case submit : case reset : case file : break; / 單選、多選和其他類(lèi)型的表單處理 case checkbox : if(checkboxName = null) checkboxName = ; arr.push(encodeURIComponent(checkboxName) + = + encodeURIComponent(this.getCheckboxValue(form.elementscheckboxName); break; case radi

7、o : if(!field.checked) break; default: if(.length 0) arr.push(encodeURIComponent() + = + encodeURIComponent(field.value); return arr.join(); ; 一個(gè)簡(jiǎn)潔的demo： form action=test_php.php id=form1 name=form1 method=post enctype=multipart/form-data 姓名：input name=name type=text tabindex=1 /

8、 br 性別：input name=sex type=radio value=男/ 男 input name=sex type=radio value=女 / 女 br 愛(ài)好： 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 / 班級(jí)： select name=class

9、multiple option value=一班級(jí)一班級(jí)/option option value=二班級(jí)二班級(jí)/option option value=三班級(jí)三班級(jí)/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), outp

10、ut = document.getElementById(output); / 自定義的提交大事 EventUtil.addEventListener(form,submit, function(event) event = EventUtil.getEvent(event); EventUtil.preventDefault(event); var html = ; html += form.elementsname.value + br; html += formUtil.getRadioValue(form.elementssex) + br; html += formUtil.getCheckboxValue(form.elementshobby) + br; html += formUtil.getSelectValue(form.elementsclass) + br; html += form.ele