js表单处理中单选多选选择框值获取及表单序列化.docx
- 文档编号:3547306
- 上传时间:2022-11-23
- 格式:DOCX
- 页数:5
- 大小:15.76KB
js表单处理中单选多选选择框值获取及表单序列化.docx
《js表单处理中单选多选选择框值获取及表单序列化.docx》由会员分享,可在线阅读,更多相关《js表单处理中单选多选选择框值获取及表单序列化.docx(5页珍藏版)》请在冰豆网上搜索。
js表单处理中单选多选选择框值获取及表单序列化
js表单处理中单选、多选、选择框值获取及表单序列化
本文总结了下在表单处理中单选、多选、选择框值的获取及表单的序列化,写成了一个对象。
如下:
varformUtil={
//获取单选按钮的值,如有没有选的话返回null
//elements为radio类的集合的引用
getRadioValue:
function(elements){
varvalue=null;//null表示没有选中项
//非IE浏览器
if(elements.value!
=undefined&&elements.value!
=‘‘){
value=elements.value;
}else{
//IE浏览器
for(vari=0,len=elements.length;i<len;i++){
if(elements[i].checked){
value=elements[i].value;
break;
}
}
}
returnvalue;
},
//获取多选按钮的值,如有没有选的话返回null
//elements为checkbox类型的input集合的引用
getCheckboxValue:
function(elements){
vararr=newArray();
for(vari=0,len=elements.length;i<len;i++){
if(elements[i].checked){
arr.push(elements[i].value);
}
}
if(arr.length0){
returnarr.join(‘,’);
}else{
returnnull;//null表示没有选中项
}
},
//获取下拉框的值
//element为select元素的引用
getSelectValue:
function(element){
if(element.selectedIndex==-1){
returnnull;//没有选中的项时返回null
};
if(element.multiple){
//多项选择
vararr=newArray(),options=element.options;
for(vari=0,len=options.length;i<len;i++){
if(options[i].selected){
arr.push(options[i].value);
}
}
returnarr.join(“,”);
}else{
//单项选择
returnelement.options[element.selectedIndex].value;
}
},
//序列化
//form为form元素的引用
serialize:
function(form){
vararr=newArray(),
elements=form.elements,
checkboxName=null;
for(vari=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;
//不发送下列类型的表单字段
caseundefined:
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.length0){
arr.push(encodeURIComponent(field.name)+“=“+encodeURIComponent(field.value));
}
}
}
returnarr.join(“&”);
}
};
一个简单的demo:
<formaction=“test_php.php”id=“form1”name=“form1”method=“post”enctype=“multipart/form-data”
姓名:
<inputname=“name”type=“text”tabindex=“1”/<br
性别:
<inputname=“sex”type=“radio”value=“男”/男
<inputname=“sex”type=“radio”value=“女”/女<br
爱好:
<inputname=“hobby”type=“checkbox”value=“篮球”/篮球
<inputname=“hobby”type=“checkbox”value=“足球”/足球
<inputname=“hobby”type=“checkbox”value=“乒乓球”/乒乓球
<inputname=“hobby”type=“checkbox”value=“羽毛球”/羽毛球
<br/
年级:
<selectname=“class”multiple
<optionvalue=“一年级”一年级</option
<optionvalue=“二年级”二年级</option
<optionvalue=“三年级”三年级</option
</select
<br/
其他:
<br/
<textareaname=“other”rows=“5”cols=“30”tabindex=“2”</textarea
<br/
<inputtype=“reset”value=“重置”/
<inputtype=“submit”value=“提交”/
</form
<divid=“output”</div
varform=document.getElementById(“form1”),
output=document.getElementById(“output”);
//自定义的提交事件
EventUtil.addEventListener(form,”submit”,function(event){
event=EventUtil.getEvent(event);
EventUtil.preventDefault(event);
varhtml=““;
html+=form.elements[‘name’].value+“<br”;
html+=formUtil.getRadioValue(form.elements[‘sex’])+“<br”;
html+=formUtil.getCheckboxValue(form.elements[‘hobby’])+“<br”;
html+=formUtil.getSelectValue(form.elements[‘class’])+“<br”;
html+=form.elements[‘other’].value+“<br”;
html+=decodeURIComponent(formUtil.serialize(form))+“<br”;
output.innerHTML=html;
});
以上就是针对js表单处理中单选、多选、选择框值的获取及表单的序列化封装的对象,希望对打击的学习有所帮助。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- js 表单 处理 中单选多选 选择 获取 序列