title: How to prevent after submitting a form to revert back to the previous Tab
body: <p>I have several tabs and each time I select a tab, the form is submitted sending a variable a different value (hidden from the user).  If I go say from TAB1 to TAB2, variable99 will get a value of 2, TAB3 a value of 3 and so on....  Problem I am having is that when I select TAB2, I don't want the page to revert back to TAB1.  Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Submit a Form on Tab Click&lt;/title&gt;
  
  &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  
  
  &lt;style type="text/css"&gt;
  &lt;/style&gt;
  
  &lt;script&gt;
  $(function() {
  $("#Main").tabs();
  $('[id^=ui-id-]').click(function(){
  var tabId = $(this).attr('id');
  var tabNum = tabId.split('-')[2];
  $('#form-' + tabNum).submit();
  });
  });
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  
  &lt;div id="Main"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#Tab1"&gt;Tab1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#Tab2"&gt;Tab2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#Tab3"&gt;Tab3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#Tab4"&gt;Tab4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#Tab5"&gt;Tab5&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#Tab6"&gt;Tab6&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;form id="form-1" action="Tab_Click_v00.html" method="post"&gt;
  &lt;input type="hidden" name="Nb_var99" value="1"&gt;
  &lt;/form&gt;   
  
  &lt;form id="form-2" action="Tab_Click_v00.html" method="post"&gt;
  &lt;input type="hidden" name="Nb_var99" value="2"&gt;
  &lt;/form&gt; 
  
  &lt;form id="form-3" action="Tab_Click_v00.html" method="post"&gt;
  &lt;input type="hidden" name="Nb_var99" value="3"&gt;
  &lt;/form&gt;
  
  &lt;form id="form-4" action="Tab_Click_v00.html" method="post"&gt;
  &lt;input type="hidden" name="Nb_var99" value="4"&gt;
  &lt;/form&gt;
  
  &lt;form id="form-5" action="Tab_Click_v00.html" method="post"&gt;
  &lt;input type="hidden" name="Nb_var99" value="5"&gt;
  &lt;/form&gt;
  
  &lt;form id="form-6" action="Tab_Click_v00.html" method="post"&gt;
  &lt;input type="hidden" name="Nb_var99" value="6"&gt;
  &lt;/form&gt;
  
  &lt;div id="Tab1"&gt;
  &lt;p&gt;Tab1&lt;/p&gt; 
  &lt;/div&gt;
  &lt;div id="Tab2"&gt;
  &lt;p&gt;Tab2&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="Tab3"&gt;
  &lt;p&gt;Tab3&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="Tab4"&gt;
  &lt;p&gt;Tab4&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="Tab5"&gt;
  &lt;p&gt;Tab5&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="Tab6"&gt;
  &lt;p&gt;Tab6&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>Here is my code now, I removed some things, that didn't make since:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Submit a Form on Tab Click&lt;/title&gt;
  
  &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  
  
  &lt;style type="text/css"&gt;
  &lt;/style&gt;
  
  &lt;script&gt;
  $(function() {//Open function
  $("#Main").tabs();
  $('[id^=ui-id-]').click(function(){ //Open [id^=ui-id-]
  
         if (tabId == 'ui-id-1')
       {
          doAjax('1');
          }
      else if (tabId == 'ui-id-2') 
       {
        doAjax('2');
       }
      else if (tabId == 'ui-id-3') 
       {
        doAjax('3');
       }
  function doAjaxSubmit(formID) { //Open doAjaxSubmin
  $.ajax({
      type: "POST",
      url: "Tab_Click_v00.html",
      data: "Nb_var99=" + formID,
  })
  } //Close doAjaxSubmin
  }); //Close [id^=ui-id-]
  });//Close function
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  
  &lt;div id="Main"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#Tab1"&gt;Tab1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#Tab2"&gt;Tab2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#Tab3"&gt;Tab3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#Tab4"&gt;Tab4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#Tab5"&gt;Tab5&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#Tab6"&gt;Tab6&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  
   &lt;div id="Tab1"&gt;
   &lt;p&gt;Tab1&lt;/p&gt; 
   &lt;/div&gt;
   &lt;div id="Tab2"&gt;
   &lt;p&gt;Tab2&lt;/p&gt;
   &lt;/div&gt;
   &lt;div id="Tab3"&gt;
   &lt;p&gt;Tab3&lt;/p&gt;
   &lt;/div&gt;
   &lt;div id="Tab4"&gt;
   &lt;p&gt;Tab4&lt;/p&gt;
   &lt;/div&gt;
   &lt;div id="Tab5"&gt;
   &lt;p&gt;Tab5&lt;/p&gt;
   &lt;/div&gt;
   &lt;div id="Tab6"&gt;
   &lt;p&gt;Tab6&lt;/p&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is not working. It also killed the css style?? I'll keep on trying.</p>