我目前有一个表单，每个问题有五个问题和一个标签。我想做的是：
我已经四处查看堆栈溢出和谷歌，但我找不到解决方案。
这是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");
}
});
}
如何调用脚本来处理表单数据，更改选项卡并显示结果。我非常感谢能得到的任何帮助。
注意：我不是那里最好的开发人员，所以我的代码可能不是最有效的。
答案 0 :(得分：0)
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({
...
});
}