How to make twitter bootstrap tab as form wizard?

Question

On my freemarker page, I create 4 tabs. What I want: if the user is on the 4th tab, only after that he can see the submit button. When it is on the 1st, 2nd or 3rd tabs, it can see the next and previous button. How to create an active next or previous tab when a button is clicked using jquery or javascript? Anyone please help ...

<div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"><a href="#declarations1" data-toggle="tab">Declarations</a></li> <li><a href="#hradetails1" data-toggle="tab">HRA Details</a></li> <#if IsHidePrevEmpITDeclaration?exists && IsHidePrevEmpITDeclaration != "true"> <li><a href="#preEmpSalary1" data-toggle="tab">Previous Employment Salary</a></li> </#if> <li><a href="#otherIncome1" data-toggle="tab">Other Income</a></li> </ul> </div> 

thanks in advance...

Answer 1

 <div class="tabbable columns"> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a id="n.1" href="#declarations1" data-toggle="tab"> Declarations </a></li> <li class=""><a id="n.2" href="#hradetails1" data-toggle="tab">HRA Details</a></li> <li class=""> <a id="n.3" href="#preEmpSalary1" data-toggle="tab">Previous Employment Salary</a></li> <li><a id="n.4" href="#otherIncome1" data-toggle="tab">Other Income</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade active in" id="declarations1"> <p>The first content</p> <input type="button" onclick="document.getElementById('n.2').click()" value="Next" /> </div> <div class="tab-pane fade" id="hradetails1"> <p>The 2nd content</p> <input type="button" onclick="document.getElementById('n.3').click()" value="Next" /> <input type="button" onclick="document.getElementById('n.1').click()" value="Previous" /> </div> <div class="tab-pane fade" id="preEmpSalary1"> <p>The 3rd content</p> <input type="button" onclick="document.getElementById('n.4').click()" value="Next" /> <input type="button" onclick="document.getElementById('n.2').click()" value="Previous" /> </div> <div class="tab-pane fade" id="otherIncome1"> <p>The 4th content</p> <input type="submit" value="submit" /> </div> </div> </div> 

Answer 2

This twitter bootstrap plugin creates wizards from the built-in formatting structure. It allows you to create wizard functions using buttons to go through the various steps of the wizard, and the use of events allows you to connect to each step individually. Check out the github .