JavaScript示例十（表單序列化）
來源：程序員人生 發布時間：2014-12-14 08:58:04 閱讀次數：3072次
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表單序列化</title>
</head>
<body>
<div style="width:350px;height:200px;background-color:YellowGreen">
<form id="myform">
<input type="text" name="text" value="default value">
<br/>
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female"/>Female
<br/>
<input type="checkbox" name="bike"/>My bike.
<input type="checkbox" name="car" />My car.
<br/>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Benz</option>
<option value="fiat">BMW</option>
<option value="audi">Audi</option>
</select>
<select name="name" multiple="multiple">
<option value ="zhangsan">zhangsan</option>
<option value="lisi">lisi</option>
<option value ="wangwu">wangwu</option>
<option value="zhaoliu">zhaoliu</option>
</select>
<br/>
<input type="button" onclick="show()" value="show form serialize">
</form>
</div>
<textarea id="mytext" cols="42" rows="5"></textarea>
<script>
function serialize(form){
var parts=[],
field=null,i,len,j,optLen,option,optValue;
for(i=0,len=form.elements.length;i<len;i++){
field=form.elements[i];
switch(field.type){
case "select-one"://單選列表默許處理
case "select-multiple"://對多選列表的處理最復雜，逐項判斷和累加
if(field.name.length){
for(j=0,optLen=field.options.length;j<optLen;j++){
option=field.options[j];
if(option.selected){
optValue="";
if(option.hasAttribute){
optValue=(option.hasAttribute("value")?
option.value:option.text);
}else{
optValue=(option.attributes["value"].specified?
option.value:option.text);
}
parts.push(encodeURIComponent(field.name)+"="+
encodeURIComponent(optValue));
}
}
}
break;
case undefined://默許處理
case "file"://默許處理
case "submit"://默許處理
case "reset"://默許處理
case "button"://不處理
break;
case "radio"://默許處理
case "checkbox":
if(!field.checked){
break;
}
default://默許處理，要求必須有name屬性
if(field.name.length){
parts.push(encodeURIComponent(field.name)+"="+
encodeURIComponent(field.value));
}
}
}
return parts.join("&");
}
function show(){
var myform=document.getElementById("myform");
var mytext=document.getElementById("mytext");
mytext.value = serialize(myform);
}
</script>
</body>
</html>
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
