php接受序列化表单,js表单中选择框值的获取及表单的序列化

这篇文章主要介绍了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表单中选择框值的获取及表单的序列化的详细介绍，希望对大家的学习有所帮助。