title: Bootstrap tab Multiple form submission by using form id in jquery
body: <p>I am using bootstrap tabs for forms. Each tab has form id. I want to submit form by using form id. My form submission works fine. When I click tab 5 times,it will send data to server 5 times. That's my problem.Also first tab form is not submitted during document on load<br>My html code is attached below:
  Here is my code: 
  <a href="http://www.bootply.com/asHAcXeSby" rel="nofollow">http://www.bootply.com/asHAcXeSby</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul class="nav nav-tabs "&gt;
    &lt;li class="active"&gt;&lt;a href="#academic" data-toggle="tab" aria-expanded="true"&gt; ABC&lt;/a&gt;&lt;/li&gt;
    &lt;li class=""&gt;&lt;a href="#extra" data-toggle="tab" aria-expanded="false"&gt; DEF&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="tab-content"&gt;
    &lt;div id="academic" class="tab-pane fade active in"&gt;
      &lt;form role="form" method="post" action="" id="academic_dtls"&gt;
        &lt;input name="xyz" type="text"&gt;
        &lt;input name="submit" value="Save" type="submit"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div id="extra" class="tab-pane"&gt;
      &lt;form role="form" method="post" action="" id="extra_dtls"&gt;
        &lt;input name="mnz" type="text"&gt;
        &lt;input name="submit" value="Save" type="submit"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code> $(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); 
    });
    }
  });
  </code></pre>