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

<!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>

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

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

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