Bootstrap tabs go to specific tab on same page after form submit

Question

I have looked at many different threads on here about this issue, but none exactly answered my question.

I have a form, on tab 2. Once I submit that form, the page reloads and I'm back at tab 1. I need it to go back to tab 2 after the form submits.

This jsfiddle shows how you can use a link to jump from tab to tab on the same page, but how would I implement it into a form? http://jsfiddle.net/technotarek/3hJ46/

It uses this function:

$("a[data-tab-destination]").on('click', function() {
        var tab = $(this).attr('data-tab-destination');
        $("#"+tab).click();
    });

Another popular link: Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

But the solutions from that link are only if your going to another page, and do not work on the same page. And I still wouldn't know how to implement that into a form.

I tried

<form action"javascript:function()">...</form>

and had a function that accomplished what I needed, but javascript doesn't work in the action attribute all that well.

How can I achieve this?

EDIT: After going through the bootstrap documentation, I still have not found a solution to my problem. To restate, I need to go to a tab that is not the primary or active tab after you submit a form.

Answer 1

I finally figured it out on my own. Still mad at the lack of help I received. For the form I did this:

<form action="profile.php#editinfo" method="post">
...
</form>

And then I added a script which only does the job because it is the last tab, but it could be revised:

<script>
var url = window.location.href;
var hash = url.substring(url.indexOf("#"));
if (hash == "#editinfo")
{
$(function(){
$('#tabmenu a:last').tab('show');
});
}
 </script>

I would've it rather went to the tab with the id #editinfo, but when changing this

$('#tabmenu a:last').tab('show');

to this

$('#tabmenu a:[href="#editinfo"]').tab('show');

It would no longer work. Just messed around and read the documentation multiple times.

Answer 2

I had a similar problem when submitting three different forms from three different bootstrap tabs. By default it was redirecting me to the primary/active tab. I solved it by sending a string with redirecting URL and checking the string in the view file, as shown below. $type is the string passed to view file after submitting form.

<script>
    $( function() {
       <?php if($type == 'string1')
       {
            ?>
           $('.tab1').click();
           <?php
        }
        if($type == 'string2')
        {
            ?>

           $('.tab2').click();
            <?php
        }
        if($type == 'string3'){
           ?>
           $('.tab3').click();
           <?php
        }
        ?>
      });
</script>

.tab1 .tab2 .tab3 are class for anchor tags.

<ul class="nav nav-tabs">
  <li role="presentation" class="nav-one active"><a href="#tab_1" aria-controls="tab_1" class="tab1" role="tab" data-toggle="tab">1st tab</a></li>
  <li role="presentation" class="nav-two"><a href="#tab_2" aria-controls="tab_2" class="tab2" role="tab" data-toggle="tab">2nd tab</a></li>
  <li role="presentation" class="nav-three"><a href="#tab_3" aria-controls="tab_3" class="tab3" role="tab" data-toggle="tab">3rd tab</a></li>
</ul>

It is not exactly what you want, but someone with a problem similar to mine can benefit from it.

Answer 3

You need to change the "data-tab-destination" on current tab, try this working demo 

http://jsfiddle.net/stanze/3hJ46/67/