Forward tab by clicking the button

Question

I have a form for registration divided into tabs, where the tabs are disabled until the user clicks on the button to enable and go to the next one. The problem is that the way it is the user has to enable the button and then click on the next tab. I need that when the user clicks the button NEXT it is directed to the next tab automatically, and add a button to return to the previous tab.

My code is like this currently: Jsfiddle

HTML:

<ul class="nav nav-pills">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>

    <div id='content' class="tab-content">
      <div class="tab-pane active" id="home">
          Nome: <input/><br/>
          <button>Próximo</button>
      </div>
      <div class="tab-pane" id="profile">
          CPF: <input/><br/>
          <button>Próximo</button>
      </div>
      <div class="tab-pane" id="messages">

          <button>Salvar</button>
      </div>
    </div>    

JS:

$(document).ready(function() {
    /*disable non active tabs*/
    $('.nav li').not('.active').addClass('disabled');
    $('.nav li').not('.active').find('a').removeAttr("data-toggle");

    $('button').click(function(){
        /*enable next tab*/
        $('.nav li.active').next('li').removeClass('disabled');
        $('.nav li.active').next('li').find('a').attr("data-toggle","tab")
    });
});

I need something like this: Example

Answer 1

The simplest way I see is to trigger the event click in the tab. Just add a trigger("click") in the row enabling it:

$('button').click(function(){
    /*enable next tab*/
    $('.nav li.active').next('li').removeClass('disabled');
    $('.nav li.active').next('li').find('a').attr("data-toggle","tab").trigger("click");
});

---

To add a back button is very simple. You can add the button directly into html. I recommend you start using classes or even ids to identify your buttons.

The following complete example:

HTML

<ul class="nav nav-pills">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>

<div id='content' class="tab-content">
    <div class="tab-pane active" id="home">
        Nome: <input/><br/>
        <button class="next">Próximo</button>
    </div>
    <div class="tab-pane" id="profile">
        CPF: <input/><br/>
        <button class="prev">Anterior</button>
        <button class="next">Próximo</button>
    </div>
    <div class="tab-pane" id="messages">
        <button class="prev">Anterior</button>
        <button class="save">Salvar</button>
    </div>
</div>

JS

$(document).ready(function() {
    /*disable non active tabs*/
    $('.nav li').not('.active').addClass('disabled');
    $('.nav li').not('.active').find('a').removeAttr("data-toggle");

    $('button.next').click(function(){
        /*enable next tab*/
        $('.nav li.active').next('li').removeClass('disabled');
        $('.nav li.active').next('li').find('a').attr("data-toggle","tab").trigger("click");
    });

    $('button.prev').click(function() {
        $('.nav li.active').prev('li').find('a').trigger("click");
    });
});

Answer 2

I’m sure Oeslei’s answer is better, but I’m leaving here a manual way to do it:

jsFiddle

$(document).ready(function() {
    /*disable non active tabs*/
    $('.nav li').not('.active').addClass('disabled');
    $('.nav li').not('.active').find('a').removeAttr("data-toggle");
    
    $('button.next').click(function(){
        $lia = $('.nav li.active');
        $li = $('.nav li.active').next('li');
        
        /*enable next tab*/
        $li.removeClass('disabled');
        $li.find('a').attr("data-toggle","tab");
        /*toggle tab*/
        $li.find('a').click();
        
        /*disable previous tab*/
        $lia.addClass('disabled');
        $lia.find('a').removeAttr("data-toggle");
    });
    $('button.previous').click(function(){
        $lia = $('.nav li.active');
        $li = $('.nav li.active').prev('li');
        
        /*enable next tab*/
        $li.removeClass('disabled');
        $li.find('a').attr("data-toggle","tab");
        /*toggle tab*/
        $li.find('a').click();
        
        /*disable previous tab*/
        $lia.addClass('disabled');
        $lia.find('a').removeAttr("data-toggle");
    });
});