Question

我目前有一个表单，每个问题有五个问题和一个标签。我想做的是：

在第五个标签上，用户提交表单数据
Ajax将表单数据发送到后台脚本进行处理
同时，在提交时，选项卡转到第6个选项卡，当脚本完成时，它会在第六个选项卡上显示结果。

我已经四处查看堆栈溢出和谷歌，但我找不到解决方案。

这是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>

这是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");
                        }
                    });
                }

如何调用脚本来处理表单数据，更改选项卡并显示结果。我非常感谢能得到的任何帮助。

注意：我不是那里最好的开发人员，所以我的代码可能不是最有效的。

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({
        ...
    });
}

我想切换多部分表单上的标签并提交表单数据

1 个答案: