jquery The form form fetches the content and binds the data
- 2021-01-11 01:51:45
- OfStack
In our daily development process, we will inevitably use the form form, we need to get the form data to save to the database, or get a string of json data in the background, to bind the data to the form form, here I wrote a plug-in based on jquery, formHelp is also easy to use:
$("#formid").serializeJson ();
$("#formid").setForm(json);
jquery. formHelp. js plug-in
/**
* will form The contents are serialized as json
* The same checkbox Stitch them together with semicolons
* @param {dom} The selector specified
* @param {obj} Need to splice in the back json object
* @method serializeJson
* */
$.fn.serializeJson=function(otherString){
var serializeObj={},
array=this.serializeArray();
$(array).each(function(){
if(serializeObj[this.name]){
serializeObj[this.name]+=';'+this.value;
}else{
serializeObj[this.name]=this.value;
}
});
if(otherString!=undefined){
var otherArray = otherString.split(';');
$(otherArray).each(function(){
var otherSplitArray = this.split(':');
serializeObj[otherSplitArray[0]]=otherSplitArray[1];
});
}
return serializeObj;
};
/**
* will josn Object assigned to form
* @param {dom} The selector specified
* @param {obj} Need to give form The assignment of json object
* @method serializeJson
* */
$.fn.setForm = function(jsonValue){
var obj = this;
$.each(jsonValue,function(name,ival){
var $oinput = obj.find("input[name="+name+"]");
if($oinput.attr("type")=="checkbox"){
if(ival !== null){
var checkboxObj = $("[name="+name+"]");
var checkArray = ival.split(";");
for(var i=0;i<checkboxObj.length;i++){
for(var j=0;j<checkArray.length;j++){
if(checkboxObj[i].value == checkArray[j]){
checkboxObj[i].click();
}
}
}
}
}
else if($oinput.attr("type")=="radio"){
$oinput.each(function(){
var radioObj = $("[name="+name+"]");
for(var i=0;i<radioObj.length;i++){
if(radioObj[i].value == ival){
radioObj[i].click();
}
}
});
}
else if($oinput.attr("type")=="textarea"){
obj.find("[name="+name+"]").html(ival);
}
else{
obj.find("[name="+name+"]").val(ival);
}
})
}
html test code
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQueryFormHelp practice </title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="jquery.formHelp.js"></script>
<script type="text/javascript">
$(function () {
$("#form").setForm({a: ' zhang 3 The neighborhood of home may be considered ', b: ' The king 5', c: ' The king 5', d: 'nishi yaldjlkfjal ',e:7,f:'8;10',i:' The king '});
});
function submitForm(){
console.log($("#form").serializeJson('id:12;name:13;'));
}
</script>
</head>
<body>
<form id="form">
<div><input type="text" name="a" /></div>
<div><input type="text" name="b" id="b" /></div>
<div><input type="hidden" name="c" id="c" /></div>
<div>
<textarea name="d" rows="8" cols="40"></textarea>
<input type="checkbox" name="f" value="10"/>
</div>
<div><select name="e">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></div>
<div>
<input type="checkbox" name="f" value="8" />
<input type="checkbox" name="f" value="9"/>
</div>
<div>
<input name="i" type="radio" value=" The king " /> The king
<input name="i" type="radio" value=" small " /> small
</div>
<div>
<input type="button" name="g" value="Submit" id="g" onclick="submitForm()"/>
</div>
</form>
</body>
</html>
The above is jquery to get form form content and binding data to form form all content, I hope to help you learn.