<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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" οnclick="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>
JavaScript示例十（表單序列化）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章