I want to switch tabs on a multi-part form and submit the form data

Question

I currently have a form that has five questions and one tab per question. What I want to do is this:

1. On the fifth tab, the user submits the form data
2. Ajax sends the form data to a script in the background to process
3. Simultaneously, on submit, the tab goes to tab number six and when the script is finished, it displays the results on this sixth tab.

I have looked around all over stack overflow and google but I haven't been able to find a solution.

Here is the html:

    <div class="tab-pane fade in active" id="htab1">
    <div class="text-center">
        <label>
            Question 1 of 5
        </label>
                <input class="form-control" type="text" id="gpa" name="gpa" placeholder="GPA">
    </div>
</br>
<div class="text-right">
    <a href="#htab2" role="tab2" data-toggle="tab" class="btn btn-default active">Next</a>
    <!-- <a href="#htab2" role="tab2" data-toggle="tab" class="btn btn-default active">Next</a> -->
</div>
</div>



<!-- Sets the form where people can enter their SAT ////////////////////////////////////////////////// 
    //////////////////////////////////////////////////////////////////////////////////////////////////// -->
    <div class="tab-pane fade" id="htab2">
        <div class="text-center">
            <label>
                Question 2 of 5
            </label>
        </div>
        <div class="row">
                    <input class="form-control" type="text" id="sat" name="sat" placeholder="SAT">
        </div>
        <div class="row">
            <div class="text-left col-md-4">
                <a href="#htab1" role="tab2" data-toggle="tab" class="btn btn-default active">Back</a>
            </div>
            <div class="text-right col-md-4 col-md-offset-4">
                <a href="#htab3" role="tab2" data-toggle="tab" class="btn btn-default active">Next</a>
            </div>
        </div>
    </div>



<!-- Sets the form where people can enter their Leadership ////////////////////////////////////////////////// 
    //////////////////////////////////////////////////////////////////////////////////////////////////// -->
    <div class="tab-pane fade" id="htab3">
        <div class="text-center">
            <label>
                Question 3 of 5
            </label>
        </div>
            <div class="radio">
                <label><input type="radio" name="leadership" id="one" value="1">...</label>
        </div>
    </div>
    <div class="row">
        <div class="text-left col-md-4">
            <a href="#htab2" role="tab2" data-toggle="tab" class="btn btn-default active">Back</a>
        </div>
        <div class="text-right col-md-4 col-md-offset-4">
            <a href="#htab4" role="tab2" data-toggle="tab" class="btn btn-default active">Next</a>
        </div>
    </div>
</div>


<!-- Sets the form where people can enter their Growth ////////////////////////////////////////////////// 
    //////////////////////////////////////////////////////////////////////////////////////////////////// -->
    <div class="tab-pane fade" id="htab4">
        <div class="text-center">
            <label>
                Question 4 of 5
            </label>
        </div>
            <div class="radio">
                <label><input type="radio" name="growth" id="one" value="1">...</label>
            </div>
    </div>
</br>
<div class="row">
    <div class="text-left col-md-4">
        <a href="#htab3" role="tab2" data-toggle="tab" class="btn btn-default active">Back</a>
    </div>
    <div class="text-right col-md-4 col-md-offset-4">
        <a href="#htab5" role="tab2" data-toggle="tab" class="btn btn-default active">Next</a>
    </div>
</div>
</div>



<!-- Sets the form where people can enter their email ////////////////////////////////////////////////// 
    //////////////////////////////////////////////////////////////////////////////////////////////////// -->
    <div class="tab-pane fade" id="htab5">
        <div class="text-center">
            <label>
                Question 5 of 5
            </label>
        </div>
                <input type="email" class="form-control" id="email" name="email" placeholder="Email">
    </div>
</br>
<div class="row">
    <div class="text-left col-md-4">
        <a href="#htab4" role="tab2" data-toggle="tab" class="btn btn-default active">Back</a>
    </div>
    <div class="text-right col-md-4 col-md-offset-4">
        <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-group btn-default"></input>
    </div>
</div>
</div>
<!-- Sets the form where people can enter their SAT ////////////////////////////////////////////////// 
    //////////////////////////////////////////////////////////////////////////////////////////////////// -->
    <div class="tab-pane fade" id="finaltab">
        <div class="text-center">
            <label>
                Final Results
            </label>
        </div>
        <div class="row">
            <div class="col-md-12 text-center">
                <h4 id="finalscore"> </h4>
            </div>
        </div>

Here is the javascript:

if($("#school-form").length>0) {
            $("#school-form").validate({
                submitHandler: function(form) {

                    var submitButton = $(this.submitButton);
                    submitButton.button("loading");


                    if($("input[name='leadership']:checked").length > 0) {
                    }

                    $.ajax({
                        type: "POST",
                        url: "script.php",
                        data: {
                            "name": $("#school-form #name").val(),
                            "email": $("#school-form #email").val(),
                            "gpa": $("#school-form #gpa").val(),
                            "sat": $("#school-form #sat").val(),
                            "leadership": $('input:radio[name=leadership]:checked').val(),
                            "growth": $('input:radio[name=growth]:checked').val()

                        },


                        // dataType: "json",
                        success: function (data) {
                                $('#finalscore').html(data);    
                        },
                        complete: function () {
                            submitButton.button("reset");
                        }
                    });
                }

How can I call the script to process the form data, change tabs and display the results. I greatly appreciate any help I can get.

Note: I'm not the best developer out there so my code may not be the most efficient.

Answer 1

It looks like you're using bootstrap 3 to create tabs so I'll provide this link to the boostrap tab documentation http://getbootstrap.com/javascript/#tabs

There's a second for methods that shows this:

$('#someTab').tab('show')

As a way to activate a tab programmatically.

Thus, in your example, you'd want to do something like

submitHandler: function(form) {
    $('#finaltab').tab('show'); //Switch to the final tab on submit
    ...
    $.ajax({
        ...
    });
}