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表单的全部内容,希望对大家的学习有所帮助。