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提交
2 年多之前 回复
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可以一次性提交吗
2 年多之前 回复
evilous
evilous 我js这么写的
2 年多之前 回复
yanweijie0317
yanweijie0317   2016.03.20 17:17

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

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

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
BootStrap 多个tab页面 保存提交后停留在操作tab页或者指定tab页
jQ+ Bootstrap  动态控制tab页面切换最近在做一个功能,一个页面包含多个tab页签,每一个tab页面都有保存和提交按钮功能,现在是希望在某个tab页面点击保存或者提交按钮提交表单后,重新加载的页面停留在当前操作的tab页面或者某个指定tab页的功能现截取关键部分代码供参考jsp部分:&amp;lt;ul class=&quot;nav nav-tabs&quot; id=&quot;myTab&quot;&amp;gt; &amp;lt;li...
菜鸟到大神的上位历程,即学即用走向人生巅峰(大神学习经验)
结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路。     互联网的快速发展和激烈竞争,用户体验成为一个重要的关注点,导致专业前端工程师成为热门职业,各大公司对前端工程师的需求量都很大,要求也越来越高,优秀的前端工程师更是稀缺。个人感觉前端入门相对容易,但是也需要系统地认
javascript 一个页面多个tab选项卡效果
javascript 一个页面多个tab选项卡效果 var tab=function(id,event){ var oDiv=document.getElementById(id); var oBtn=oDiv.getElementsByTagName("li"); var oBox=oDiv.getElementsByTagName("div"); for(var i=0;i
用数组求N的阶乘,可以运行
用数组求N的阶乘,可以运行用数组求N的阶乘,可以运行
js实现多tab栏切换效果(二)
上篇js实现tab栏切换效果(一)实现了tab栏的切换效果,如果实现多tab栏的切换效果的话,直接用上面的代码会有小bug。不过不用怕,给每个tab栏加一个id唯一标识的话,就没啥问题了。 废话上说,上代码:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
js练习之个人信息的输入和显示
用js代码实现下列个人信息的输入和显示,如下图 代码如下: html> html lang="en"> head> meta charset="UTF-8"> title>作业title> script type="text/javascript"> var a=prompt("请输入姓名"); var b=promp
js多图片上传--一次性上传多张
适用各种版本的多图片上传,如果ie上测试有问题那就可能是ie设置有问题 html> html xmlns="http://www.w3.org/1999/xhtml"> head lang="en"> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>title> st
dwz表单提交后跳转到另外的navTab
1.场景 在某navTab中提交form,成功后需要跳转到另外一个navTab。 2.版本 1.4.3 3.解决方案 其实这块东西在官方文档上已经有说明,我在这里记录的主要目的是为了下次迅速解决问题,具体方法如下: 1)添加回调 onsubmit="return validateCallback(this,navTabAjaxDone);" 2)后台返回
JSP小技巧-tab页
Microsoft. NET( 以下简称. NET) 框架是微软提出的新一代 Web 软件开发模型, C# 语言 是 .NET 框架中新一代的开发工具。 C# 语言是一种现代、面向对象的语言,它简化了 C++ 语 言在类、 命名空间、 方法重载和异常处理等方面的操作, 它摒弃了 C++ 的复杂性, 更易使用, 更少出错。它使用组件编程,和 VB 一
使用angularJs实现tab切换
最近的项目客户要求使用angularJs,不得不说angularJs用起来确实方便。但是有些功能事件不会的话还是会用jq。其实在使用angularJs的时候,能不用jq最后还是不用jq,以免混乱、冲突。 闲话少叙,项目中有tab切换的需要,这很常见。若是不引用angularJs 的话,一般是自己用jq手写,也有人引用tab插件。但是引用了angularJs之后,怎么用angularJs实现tab...