这篇文章主要介绍了js表单中选择框值的获取及表单的序列化,学习表单中单选、多选、选择框值的获取,需要的朋友可以参考下
本文特意为js表单中选择框值的获取及表单的序列化做了下总结,写成了一个对象,分享给大家,欢迎大家学习。
var formUtil = {
// 获取单选按钮的值,如有没有选的话返回null
// elements为radio类的集合的引用
getRadioValue:function(elements) {
var value = null; // null表示没有选中项
// 非IE浏览器
if(elements.value != undefined && elements.value != '') {
value = elements.value;
} else {
// IE浏览器
for(var i = 0, len = elements.length; i < len; i++ ) {
if(elements[i].checked) {
value = elements[i].value;
break;
}
}
}
return value;
},
// 获取多选按钮的值,如有没有选的话返回null
// elements为checkbox类型的input集合的引用
getCheckboxValue:function(elements) {
var arr = new Array();
for(var i = 0, len = elements.length; i < len; i++ ) {
if(elements[i].checked) {
arr.push(elements[i].value);
}
}
if(arr.length > 0) {
return arr.join(',');
} else {
return null; // null表示没有选中项
}
},
// 获取下拉框的值
// element为select元素的引用
getSelectValue:function(element) {
if(element.selectedIndex == -1) {
return null; // 没有选中的项时返回null
};
if(element.multiple) {
// 多项选择
var arr = new Array(), options = element.options;
for(var i = 0, len = options.length; i < len; i++) {
if(options[i].selected) {
arr.push(options[i].value);
}
}
return arr.join(",");
}else{
// 单项选择
return element.options[element.selectedIndex].value;
}
},
// 序列化
// form为form元素的引用
serialize:function(form) {
var arr = new Array(),
elements = form.elements,
checkboxName = null;
for(var i = 0, len = elements.length; i < len; i++ ) {
field = elements[i];
// 不发送禁用的表单字段
if(field.disabled) {
continue;
}
switch (field.type) {
// 选择框的处理
case "select-one":
case "select-multiple":
arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(this.getSelectValue(field)));
break;
// 不发送下列类型的表单字段
case undefined :
case "button" :
case "submit" :
case "reset" :
case "file" :
break;
// 单选、多选和其他类型的表单处理
case "checkbox" :
if(checkboxName == null) {
checkboxName = field.name;
arr.push(encodeURIComponent(checkboxName) + "=" + encodeURIComponent(this.getCheckboxValue(form.elements[checkboxName])));
}
break;
case "radio" :
if(!field.checked) {
break;
}
default:
if(field.name.length > 0) {
arr.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
}
}
}
return arr.join("&");
}
};
一个简单的demo:
姓名:
性别: 男
女
爱好:
篮球
足球
乒乓球
羽毛球
年级:
一年级
二年级
三年级
其他:
var form = document.getElementById("form1"),
output = document.getElementById("output");
// 自定义的提交事件
EventUtil.addEventListener(form,"submit", function(event) {
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
var html = "";
html += form.elements['name'].value + "
";
html += formUtil.getRadioValue(form.elements['sex']) + "
";
html += formUtil.getCheckboxValue(form.elements['hobby']) + "
";
html += formUtil.getSelectValue(form.elements['class']) + "
";
html += form.elements['other'].value + "
";
html += decodeURIComponent(formUtil.serialize(form)) + "
";
output.innerHTML = html;
});
以上就是对js表单中选择框值的获取及表单的序列化的详细介绍,希望对大家的学习有所帮助。