jquery form表单获取内容以及绑定数据
在日常开发的过程中，难免会用到form表单，我们需要获取表单的数据保存到数据库，或者拿到后台的一串json数据，要将数据绑定到form表单上，这里我写了一个基于jquery的，formHelp插件，使用起来也很简单：
获取表单的数据：$("#formid").serializeJson();
绑定数据到表单：$("#formid").setForm(json);
jquery.formHelp.js插件
/**
*将form里面的内容序列化成json
*相同的checkbox用分号拼接起来
*@param{dom}指定的选择器
*@param{obj}需要拼接在后面的json对象
*@methodserializeJson
**/
$.fn.serializeJson=function(otherString){
varserializeObj={},
array=this.serializeArray();
$(array).each(function(){
if(serializeObj[this.name]){
serializeObj[this.name]+=';'+this.value;
}else{
serializeObj[this.name]=this.value;
}
});
if(otherString!=undefined){
varotherArray=otherString.split(';');
$(otherArray).each(function(){
varotherSplitArray=this.split(':');
serializeObj[otherSplitArray[0]]=otherSplitArray[1];
});
}
returnserializeObj;
};
/**
*将josn对象赋值给form
*@param{dom}指定的选择器
*@param{obj}需要给form赋值的json对象
*@methodserializeJson
**/
$.fn.setForm=function(jsonValue){
varobj=this;
$.each(jsonValue,function(name,ival){
var$oinput=obj.find("input[name="+name+"]");
if($oinput.attr("type")=="checkbox"){
if(ival!==null){
varcheckboxObj=$("[name="+name+"]");
varcheckArray=ival.split(";");
for(vari=0;i<checkboxObj.length;i++){
for(varj=0;j<checkArray.length;j++){
if(checkboxObj[i].value==checkArray[j]){
checkboxObj[i].click();
}
}
}
}
}
elseif($oinput.attr("type")=="radio"){
$oinput.each(function(){
varradioObj=$("[name="+name+"]");
for(vari=0;i<radioObj.length;i++){
if(radioObj[i].value==ival){
radioObj[i].click();
}
}
});
}
elseif($oinput.attr("type")=="textarea"){
obj.find("[name="+name+"]").html(ival);
}
else{
obj.find("[name="+name+"]").val(ival);
}
})
}
html测试代码
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title>jQueryFormHelp练习</title>
<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<scriptsrc="jquery.formHelp.js"></script>
<scripttype="text/javascript">
$(function(){
$("#form").setForm({a:'张三家的附近可考虑将',b:'王五',c:'王五',d:'nishiyaldjlkfjal',e:7,f:'8;10',i:'王'});
});
functionsubmitForm(){
console.log($("#form").serializeJson('id:12;name:13;'));
}
</script>
</head>
<body>
<formid="form">
<div><inputtype="text"name="a"/></div>
<div><inputtype="text"name="b"id="b"/></div>
<div><inputtype="hidden"name="c"id="c"/></div>
<div>
<textareaname="d"rows="8"cols="40"></textarea>
<inputtype="checkbox"name="f"value="10"/>
</div>
<div><selectname="e">
<optionvalue="5"selected="selected">5</option>
<optionvalue="6">6</option>
<optionvalue="7">7</option>
</select></div>
<div>
<inputtype="checkbox"name="f"value="8"/>
<inputtype="checkbox"name="f"value="9"/>
</div>
<div>
<inputname="i"type="radio"value="王"/>王
<inputname="i"type="radio"value="小"/>小
</div>
<div>
<inputtype="button"name="g"value="Submit"id="g"onclick="submitForm()"/>
</div>
</form>
</body>
</html>
以上就是jquery获取form表单内容以及绑定数据到form表单的全部内容，希望对大家的学习有所帮助。