表单中单选、多选、选择框值的获取及表单的序列化
总结了下在表单处理中单选、多选、选择框值的获取及表单的序列化，写成了⼀个对象。如下：
1 var formUtil = {
2// 获取单选按钮的值，如有没有选的话返回null
3// elements为radio类的集合的引⽤
4 getRadioValue:function(elements) {
5var value = null; // null表⽰没有选中项
6// ⾮IE浏览器
7if(elements.value != undefined && elements.value != '') {
8 value = elements.value;
9 } else {
10// IE浏览器
11for(var i = 0, len = elements.length; i < len; i++ ) {
12if(elements[i].checked) {
13 value = elements[i].value;
14break;
15 }
16 }
17 }
18return value;
19 },
20
21// 获取多选按钮的值，如有没有选的话返回null
22// elements为checkbox类型的input集合的引⽤
23 getCheckboxValue:function(elements) {
24var arr = new Array();
25for(var i = 0, len = elements.length; i < len; i++ ) {
26if(elements[i].checked) {
27 arr.push(elements[i].value);
28 }
29 }
30if(arr.length > 0) {
31return arr.join(',');
32 } else {
33return null; // null表⽰没有选中项
34 }
35 },
36
37// 获取下拉框的值
38// element为select元素的引⽤
39 getSelectValue:function(element) {
40if(element.selectedIndex == -1) {
41return null; // 没有选中的项时返回null
42 };
43if(element.multiple) {
44// 多项选择
45var arr = new Array(), options = element.options;
46for(var i = 0, len = options.length; i < len; i++) {
47if(options[i].selected) {
48 arr.push(options[i].value);
49 }
50 }
51return arr.join(",");
52 }else{
53// 单项选择
54return element.options[element.selectedIndex].value;
55 }
56 },
57
58// 序列化
59// form为form元素的引⽤
60 serialize:function(form) {
61var arr = new Array(),
62 elements = form.elements,
63 checkboxName = null;
64for(var i = 0, len = elements.length; i < len; i++ ) {
65 field = elements[i];
66// 不发送禁⽤的表单字段
67if(field.disabled) {
68continue;
69 }
70switch (pe) {
71// 选择框的处理
72case "select-one":
73case "select-multiple":
74 arr.push(encodeURIComponent(field.name) + "=" + SelectValue(field)));
75break;
76
77// 不发送下列类型的表单字段
78case undefined :
79case "button" :textarea中cols表示
80case "submit" :
81case "reset" :
82case "file" :
83break;
84
85// 单选、多选和其他类型的表单处理
86case "checkbox" :
87if(checkboxName == null) {
88 checkboxName = field.name;
89 arr.push(encodeURIComponent(checkboxName) + "=" + CheckboxValue(form.elements[checkboxName])));
90 }
91break;
92case "radio" :
93if(!field.checked) {
94break;
95 }
96default:
97if(field.name.length > 0) {
98 arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
99 }
100 }
101 }
102return 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 = ElementById("form1"),
2 output = ElementById("output");
3
4// ⾃定义的提交事件
5 EventUtil.addEventListener(form,"submit", function(event) {
6 event = Event(event);
7 EventUtil.preventDefault(event);
8var html = "";
9 html += form.elements['name'].value + "<br>";
10 html += RadioValue(form.elements['sex']) + "<br>";
11 html += CheckboxValue(form.elements['hobby']) + "<br>";
12 html += SelectValue(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在”跨浏览器的事件侦听器和事件对象“这篇⽂章有介绍。链接：wwwblogs/yuanke/p/5045821.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论