ブートストラップタブjqueryでフォームIDを使用して複数フォームを送信

Question

フォーム用のブートストラップタブを使用しています。各タブにはフォームIDがあります。フォームIDを使用してフォームを送信したい私のフォーム提出は正常に動作します。タブを5回クリックすると、サーバーに5回データが送信されます。私のproblem.Also最初のタブフォームがロード
上の文書中に提出されていないことは、私のHTMLコードを下に添付されています：ここでは 私のコードです： http://www.bootply.com/asHAcXeSby

HTML：

<ul class="nav nav-tabs "> 
    <li class="active"><a href="#academic" data-toggle="tab" aria-expanded="true"> ABC</a></li> 
    <li class=""><a href="#extra" data-toggle="tab" aria-expanded="false"> DEF</a></li> 
</ul> 
<div class="tab-content"> 
    <div id="academic" class="tab-pane fade active in"> 
    <form role="form" method="post" action="" id="academic_dtls"> 
     <input name="xyz" type="text"> 
     <input name="submit" value="Save" type="submit"> 
    </form> 
    </div> 
    <div id="extra" class="tab-pane"> 
    <form role="form" method="post" action="" id="extra_dtls"> 
     <input name="mnz" type="text"> 
     <input name="submit" value="Save" type="submit"> 
    </form> 
    </div> 
</div> 

JS：

$(document).ready(function(){ 

    var activeTab = null; 
    $('a[data-toggle="tab"]').on('show.bs.tab', function (event) { 
    activeTab = $(event.target).attr("href"); 
    submit_form(); 
    }); 
    function submit_form(){ 
    $('form').submit(function(e){ 
     e.preventDefault(); 
     //alert($(this).attr('id')); 
     var data = $(this).serialize(); 
     console.log(data); 
    }); 
    } 
}); 

Answer 1

このチェック：http://www.bootply.com/fCNm9iQ7t1 をあなたがやっていた間違いは、あなたが提出したイベントを結合されたタブが

$(document).ready(function(){ 

    var activeTab = null; 
    $('a[data-toggle="tab"]').on('show.bs.tab', function (event) { 
    activeTab = $(event.target).attr("href"); 
    }); 
    $('form').submit(function(e){ 
     var data = $(this).serialize(); 
     console.log(data); 
    }); 

}); 

Answer 2

$(document).ready(function(){ 

    $('form').submit(function(e){ 
     e.preventDefault(); 
     //alert($(this).attr('id')); 
     var data = $(this).serialize(); 
     console.log(data); 
    }); 

    var activeTab = null; 
    $('a[data-toggle="tab"]').on('show.bs.tab', function (event) { 
    activeTab = $(event.target).attr("href"); 
    }); 

});