2 evilous evilous 于 2016.03.20 15:41 提问

js实现多个tab页面信息录入后 一次性提交,本人菜鸟 求大神详细解答 感恩在心 40C

<!DOCTYPE html>



基本信息


<br> $(document).ready(function() {<br> claimcaseInfo.init();<br> });<br>


报案信息





                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane" id="accidentInfo"></div>
                        <div role="tabpane2" class="tab-pane active" id="deservePay"></div>
                        <div role="tabpane3" class="tab-pane" id="claimAccount"></div>
                        <div role="tabpane4" class="tab-pane" id="receiptUp"></div>
                        <div role="tabpane5" class="tab-pane" id="provementUp"></div>
                    </div>  
                </div>
            </div>
        </div>
    </div>
</div>


其中一个tab页面如下:

事故信息
            <div class="tools">
                <a href="javascript:;" class="collapse"> </a>
                <a href="javascript:;" class="reload"></a>
            </div>
        </div>
    <div class="portlet-body">
出险人
                </div>
                <div class="form-group">
                    <label class="col-xs-5 control-label">事故日期</label>
                    <div class="col-xs-7">
                        <input type="date" class="form-control" name="acc_date" id="acc_date" placeholder=""/>
                    </div>
                </div>
                <div class="form-group" id="priorityDiv">
                    <label class="col-xs-5 control-label">出险原因</label>
                    <div class="col-xs-7">
                        <textarea rows="5" cols="39" id="acc_reason" name="acc_reason" placeholder=""></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-5 control-label">事故地点(省)</label>
                    <div class="col-xs-7">
                       <input type="text" class="form-control" name="acc_province" id="acc_province" placeholder=""/>
                    </div>
                </div>            
            </div>
            <div class="col-xs-5">
                <div class="form-group">
                    <label class="col-xs-5 control-label">事故地点(市)</label>
                    <div class="col-xs-7">
                        <input type="text" class="form-control" name="acc_city" id="acc_city" placeholder=""/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-5 control-label">事故地点(县)</label>
                    <div class="col-xs-7">
                         <input type="text" class="form-control" name="acc_distreact" id="acc_distreact" placeholder=""/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-5 control-label">事故描述</label>
                    <div class="col-xs-7">
                        <textarea rows="5" cols="39" id="accDesc" name="accDesc" placeholder=""></textarea>
                    </div>
                </div>
                 <div class="form-group" id="concurrentSizeDiv">
                    <label class="col-xs-5 control-label">事故地点(街道)</label>
                    <div class="col-xs-7">
                        <input type="text" class="form-control" name="acc_street" id="acc_street" placeholder=""/>
                    </div>
                </div>
            </div>
       </div>
      </div>
    </div>
  </div>

3个回答

wenxuechaozhe
wenxuechaozhe   2016.03.20 15:53

多个tab页面,调用的为同一个js代码,你ajax请求提交的时候,获取每个tab对应的输入内容,然后进行表单提交即可。
若要是用form表单提交的话,不同tab页面放到一个表单中,然后进行form表单提交即可。

wenxuechaozhe
wenxuechaozhe 回复evilous: 用load页面不行吧。你可以试试include方法,然后用$(''#)控制现实与否,然后统一进行ajax提交
一年多之前 回复
evilous
evilous var claimcaseInfo={ projectName : "/cs-online-commu", baseURL : "/claimecase/", init:function(){ $("#accidentInfo").load("views/cs/online/claimcase/accidentInfo.html"); $("#claimAccount").load("views/cs/online/claimcase/claim_account.html"); $("#deservePay").load("views/cs/online/claimcase/claim_pay.html") } } load不同的html ajax可以一次性提交吗
一年多之前 回复
evilous
evilous 我js这么写的
一年多之前 回复
yanweijie0317
yanweijie0317   2016.03.20 17:17

一个jsp页面多个div,放在同一个form里

yanweijie0317
yanweijie0317 回复evilous: 那就放到同一个html,应该是一样的
一年多之前 回复
evilous
evilous 我们项目是没有jsp页面 只有html 前后端分离的
一年多之前 回复
hanfeizaopao
hanfeizaopao   2016.03.21 10:07

很简单,只需要把每个tab页面的代码放到单独div 用display:none 控制,提交的时候直接取结果就ok了~
望采纳

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!