jQuery实现表单动态加减、ajax表单提交功能
对于前端开发,我的归类是分2种层次,首先第一种是基于前端架构上的开发,有一些后台开发的同事会瞧不起搞前端的,他们认为前端无非是画个页面嘛,这就有点夜郎自大了。现在我了解的一些前端框架基本分为3个主流框架:reactjs,vue,angularjs,前两个还是目前的主流趋势。第二种就是基于市面上的一些非主流工具包,比如bui,flatui等,再结合自己的dom操作。
好了,废话不多说了,本篇文章主要讲怎么去实现表单动态加减的效果,花了一天时间搞出来,特来分享一下。本文主要分为两部分: 一是页面表单动态加减实现,二是复杂表单项提交到controller层。
一、表单动态加减的实现
1.页面效果如下,第一个新增按钮增加的是,费用类型1和资金账户名称横向两栏这块,就称为div块吧,第二个新增按钮增加的是,资金账户名称横向一栏,称为sondiv块吧。第二个费用类型1和以下是新增出来的,所以显示是删除按钮,同样第二个资金账户名称也是新增出来的,所以也显示删除按钮。
2.代码片段,html部分如下(用的bui)
<div class="panel" style="margin-bottom: 10px;"> <div class="panel-body"> <form id="j_form" class="form-horizontal" action="" method="get"> <div class="row-fluid"> <div class="control-group span6"> <label class="control-label"><s>*</s>产品名称</label> <div class="controls"> <select id="prodname" name="prodname" class="input-normal data-messages="{required:'产品名称'}" data-rules="{required:true}" > <option value="">请选择</option> <option value="大毛贷">大毛贷</option> <option value="老子贷">老子贷</option> </select> </div> </div> <div class="control-group span6"> <label class="control-label"><s>*</s>子产品名称</label> <div class="controls"> <select id="subprodname" name="subprodname" class="input-normal data-messages="{required:'子产品名称'}" data-rules="{required:true}" > <option value="">请选择</option> <option value="小毛贷">小毛贷</option> <option value="小子贷">小子贷</option> </select> </div> </div> </div> <div class="row-fluid"> <hr style="height:1px;padding-bottom:20px;margin:0 auto;filter:alpha(opacity:30);opacity:0.5;border:none;border-top:1px solid #778899;"/> </div> <div id="div1" class="div1 row-fluid"> <div class="row-fluid"> <div class="control-group span6"> <label class="control-label"><s>*</s>费用类型1</label> <div class="controls"> <select id="feetype1" name="feetype1" class="input-normal data-messages="{required:'费用类型1'}" data-rules="{required:true}" > <option value="">请选择</option> <option value="放款">放款</option> <option value="保费">保费</option> </select> </div> </div> <input id="div1btnadd" type="button" value="新增" class="button button-submit"> </div> <div id="subdiv1" class="subdiv1 row-fluid"> <div class="control-group span6"> <label class="control-label"><s>*</s>资金账户名称</label> <div class="controls"> <select id="fundname" name="fundname" class="input-normal data-messages="{required:'资金账户名称'}" data-rules="{required:true}" > <option value="">请选择</option> <option value="xx保证金">xx保证金</option> <option value="xx储备金">xx储备金</option> </select> </div> </div> <div class="control-group span6"> <label class="control-label"><s>*</s>方向</label> <div class="controls"> <select id="dest" name="dest" class="input-normal data-messages="{required:'方向'}" data-rules="{required:true}" > <option value="">请选择</option> <option value="调增">调增</option> <option value="调减">调减</option> </select> </div> </div> <div class="control-group span6"> <label class="control-label"><s>*</s>交易类型</label> <div class="controls"> <select id="transtype" name="transtype" class="input-normal data-messages="{required:'交易类型'}" data-rules="{required:true}" > <option value="">请选择</option> <option value="提现">提现</option> <option value="保证金缴保费">保证金缴保费</option> </select> </div> </div> <button id="subdiv1btnadd" type="button" onclick="addsubdiv1($(this))" class="button button-submit">新增</button> </div> </div> </form> </div> <div class="row-fluid"> <div class="form-actions"> <button type="button" id="btnsubmit" class="button button-submit">提交</button> <button type="button" id="btnback" class="button button-back "><span class="span-back">返回</span></button> </div> </div> </div>
js代码部分:
//div1模块添加 $('#div1btnadd').on('click', function() { var div1 = $('#div1').clone(true); // div1.find("input[id='div1btnadd']").attr("value","删除"); // div1.find("input[id='div1btnadd']").attr("onclick","deleteparent($(this))"); // div1.find("input[id='div1btnadd']").removeattr("id"); div1.find("input[id='div1btnadd']").replacewith('<input type="button" value="删除" class="button button-submit" onclick="deletediv1($(this))" >'); div1.appendto('#j_form'); }); //div1子模块行添加 function addsubdiv1(obj){ var subdiv1 = $('#subdiv1').clone(true); subdiv1.find("button[id='subdiv1btnadd']").remove(); subdiv1.append('<input type="button" value="删除" class="button button-submit" onclick="deletesubdiv1($(this))" >').appendto(obj.parents('#subdiv1').parents('#div1')); } //div1子模块行添加 /** $('#subdiv1btnadd').on('click', function() { var subdiv1 = $('#subdiv1').clone(true); subdiv1.find("button[id='subdiv1btnadd']").remove() subdiv1.append('<input type="button" value="删除" class="button button-submit" onclick="deletesubdiv1($(this))" >').appendto('#div1'); }); */ function deletediv1(obj){ obj.parents('#div1').remove(); } function deletesubdiv1(obj){ obj.parents('#subdiv1').remove(); }
页面展示部分效果基本完成,其中有部分代码注释的,那是我调试的代码,可以忽略,虽然不对,但可以作为纠错参考,可以想想为啥不对。
二、复杂表单项提交到controller
接着上面,页面展示好了,后面要做的就是把表单内容提交到后台,后台我用的是springmvc接收的,直接看代码吧
js部分:
//var obj = $("#j_form").serialize(); $("#btnsubmit").click(function(){ var prodname = $("#j_form").find("select[name='prodname']").val(); var subprodname = $("#j_form").find("select[name='subprodname']").val(); var div1arr = new array(); var obj = new object(); $('.div1').each(function(){ //循环div1 var div1=$(this); var feetype1var = div1.find("select[name='feetype1']").val(); div1.find('.subdiv1').each(function(){ //循环subdiv1 var subdiv1=$(this); var obj = new object(); obj.feetype = feetype1var; obj.repayway = 0; obj.fundname = subdiv1.find("select[name='fundname']").val(); obj.dest = subdiv1.find("select[name='dest']").val(); obj.transtype = subdiv1.find("select[name='transtype']").val(); div1arr.push(json.stringify(obj)); }); }) $.ajax({ type : 'post', traditional:true,//防止深度序列化 cache:false, async:false, datatype : 'json', url : '/fundacct/menu/addfundconfigtodb', data : { "prodname" : prodname, "subprodname" : subprodname, "dataarr" :div1arr }, success : function(data) { if (data.msg=='success') { bui.message.alert("success", "success"); // 刷新页面 } else { bui.message.alert("error:系统异常", "error"); } }, error : function(data) { bui.message.alert("error:系统异常", "error"); } }); });
后台controller部分:
@requestmapping("/addfundconfigtodb") @responsebody public jsonobject modifytranscodetodb(httpservletrequest request, map<string, object> model) { //log.info("交易类型--------------------修改落库db"); jsonobject json = new jsonobject(); map<string, string[]> webparamap = request.getparametermap(); string dataarry[] = webparamap.get("dataarr");// todo parse to object string prodname = webparamap.get("prodname")[0]; string subprodname = webparamap.get("subprodname")[0]; string username = null; if (null != ssosession.getcurrentuser(request)) { username = ssosession.getcurrentuser(request).getname(); } //log.info("修改交易类型,id = {},名称 = {},当前用户 ={}", id, transname, username); if (dataarry.length > 1) { json.put("msg", "success"); return json; } else { json.put("msg", "fail"); return json; } }
总结
以上所述是小编给大家介绍的jquery实现表单动态加减、ajax表单提交功能,希望对大家有所帮助
上一篇: jQuery实现列表的增加和删除功能
下一篇: JavaScript判断IE版本型号