Javascript 引导选项卡使用jquery中的表单id提交多个表单

我正在为表单使用引导选项卡。每个选项卡都有表单id。我想使用表单id提交表单。我的表单提交工作正常。当我单击tab 5次时，它将向服务器发送数据5次。这是我的问题。另外，在加载文档期间未提交第一个选项卡表单
我的html代码附在下面： 这是我的密码：

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>

 $(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); 
  });
  }
});

选中此项： 您所犯的错误是每次显示选项卡时都绑定提交事件

$(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); 
  });

});

---

在这里显示您的代码。Bootply链接处于POSIT状态。它在fiddle上运行良好，但在我的申请表中，如果没有选项卡初始化，id将无法工作。首先，我使用了和你描述的相同的方法。当它不起作用时，我使用我描述的方法，可能存在一些jquery冲突。尝试将类赋予窗体，然后调用函数。我在窗体中使用了不同的类，但它不起作用。当表单标记在tab之前初始化时，您的方法工作正常，但当表单标记在tab内部时，它就不工作了

$(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); 
  });

});