源码动态 源码评测 源码技巧 网站运营 网页制作 网站开发 安全相关 软件教程 IDC资讯 业界消息
高级搜索
关键字:Discuz!  Axure  团购系统
最新更新发布资源提建议收藏本站
当前位置:A5下载 > 资讯报道 > 编程开发 > 网站开发 > jquery form表单获取内容以及绑定数据

jquery form表单获取内容以及绑定数据

作者:fang来源:a5源码浏览:时间:2016-02-25 13:59我要评论
这篇文章主要介绍了jquery form表单获取内容以及form表单绑定数据,获取表单的数据保存到数据库,或者将数据绑定到form表单,感兴趣的小伙伴们可以参考一下

在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使用起来也很简单:

获取表单的数据:$("#formid").serializeJson();

绑定数据到表单:$("#formid").setForm(json);

jquery.formHelp.js插件

/**

* 将form里面的内容序列化成json

* 相同的checkbox用分号拼接起来

* @param {dom} 指定的选择器

* @param {obj} 需要拼接在后面的json对象

* @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;

};

/**

* 将josn对象赋值给form

* @param {dom} 指定的选择器

* @param {obj} 需要给form赋值的json对象

* @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测试代码

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>jQueryFormHelp练习</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: '张三家的附近可考虑将', b: '王五', c: '王五', d: 'nishi yaldjlkfjal ',e:7,f:'8;10',i:'王'});

});

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="王" />王

<input name="i" type="radio" value="小" />小

</div>

<div>

<input type="button" name="g" value="Submit" id="g" onclick="submitForm()"/>

</div>

</form>

</body>

</html>

以上就是jquery获取form表单内容以及绑定数据到form表单的全部内容,希望对大家的学习有所帮助。

相关文章
评论暂时关闭
资讯分类
本类热门资讯
  • 源码推荐
  • 软件推荐
关于我们联系我们发布资源广告服务合作伙伴网站地图版权声明与我们对话