当达到最后一个标签时提交多标签页
问题描述:
我有一个包含6个标签的多标签页。我想将它插入到数据库中,但我不知道如何去做。我希望在用户填写最后一个选项卡时提交。我还想在最后一个选项卡处于活动状态时将按钮从“下一个”更改为“提交”按钮。此外,我希望用户能够查看他的答案,并从标签页到标签页之间切换。 下面是验证输入字段并调整进度条的jquery。 当达到最后一个标签时提交多标签页
$(document).ready(function() {
var $validator = $("#wizardForm").validate({
rules: {
emp_fname: {
required: true
},
emp_lname: {
required: true
},
gender: {
required: true
},
CivilStatus: {
required: true
},
citizenship: {
required: true
},
}
});
$('#rootwizard').bootstrapWizard({
'tabClass': 'nav nav-tabs',
onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index + 1;
var $percent = ($current/$total) * 100;
$('#rootwizard').find('.progress-bar').css({
width: $percent + '%'
});
},
'onNext': function(tab, navigation, index) {
var $valid = $("#wizardForm").valid();
if (!$valid) {
$validator.focusInvalid();
return false;
}
},
'onTabClick': function(tab, navigation, index) {
var $valid = $("#wizardForm").valid();
if (!$valid) {
$validator.focusInvalid();
return false;
}
},
});
});
<!-- begin snippet: js hide: false console: true babel: false -->
<form id="wizardForm" method="POST">
<div class="tab-content">
<div class="tab-pane active fade in" id="tab1">
<div class="row m-b-lg">
<div class="col-md-12">
<div class="row">
<div class="form-group col-md-3">
<label for="exampleInputName">First Name</label>
<input type="text" class="form-control" name="emp_fname" id="exampleInputName" placeholder="First Name">
</div>
<div class="form-group col-md-3">
<label for="MiddleName">Middle Name</label>
<input type="text" class="form-control col-md-6" name="emp_mname" id="MiddleName" placeholder="Middle Name">
</div>
<div class="form-group col-md-3">
<label for="exampleInputName2">Last Name</label>
<input type="text" class="form-control col-md-6" name="emp_lname" id="exampleInputName2" placeholder="Last Name">
</div>
<div class="form-group col-md-3">
<label for="exampleInputName2">Name Extension</label>
<select id="extension" class="form-control col-md-2 col-xs-12" name="nameExt">
<option selected disabled="">---</option>
<option value="Jr.">Jr.</option>
<option value="Sr.">Sr.</option>
</select>
</div>
这些是使用户可以去下一个选项卡上的按钮。
<ul class="pager wizard">
<li class="previous"><a href="Add_Emp.php#" class="btn btn-default" name="Previous" id="prev">Previous</a>
</li>
<li class="next"><a href="Add_Emp.php#" type="submit" class="btn btn-default" name="Next" id="next">Next</a>
</li>
</ul>
答
为什么不放在最后选项卡上的形式提交按钮?
您可以根据需要在每个选项卡窗格中放置您的下一个和上一个按钮。
您错过了上面的一些表单代码,所以它不显示您引用的按钮。
答
改变这样的按钮:
<ul class="pager wizard">
<li class="previous"><div class="btn btn-default" name="Previous" id="prev">Previous</div>
</li>
<li class="next"><div href="Add_Emp.php#" type="submit" class="btn btn-default" name="Next" id="next">Next</div>
</li>
<li class="next"><input type="submit" class="btn btn-default hidden" value="Save" id="btn_save">
</li>
</ul>
添加到你的CSS:
.hidden {
display:none;
}
更改JavaScript的你有以上:
$('#rootwizard').bootstrapWizard({
'tabClass': 'nav nav-tabs',
onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index + 1;
var $percent = ($current/$total) * 100;
$('#rootwizard').find('.progress-bar').css({
width: $percent + '%'
});
set_buttons(index); // Set the button enabled and visibility
},
'onNext': function(tab, navigation, index) {
var $valid = $("#wizardForm").valid();
if (!$valid) {
$validator.focusInvalid();
return false;
}
},
'onTabClick': function(tab, navigation, index) {
var $valid = $("#wizardForm").valid();
if (!$valid) {
$validator.focusInvalid();
return false;
}
},
});
});
// This function sets the buttons enable and visibility based on which tab is active.
function set_buttons(index) {
if(index == 0) {
// On first tab, so disable the previous button
$('#prev').prop('disabled',true);
$('#next').removeClass('hidden'); // Make sure next is visible
$('#btn_save').addClass('hidden'); // Make sure save button is hidden.
} else if(index == navigation.find('li').length) {
// On last tab, so hide the next button, make the save button visible
$('#prev').prop('disabled',false); // Make sure prev is enabled.
$('#next').addClass('hidden'); // Make sure next is hidden
$('#btn_save').removeClass('hidden'); // Make sure save button is visible.
} else {
// On a middle tab (not first or last), enable previous and next buttons, hide save button
$('#prev').prop('disabled',false); // Make sure prev is enabled.
$('#next').removeClass('hidden'); // Make sure next is visible
$('#btn_save').addClass('hidden'); // Make sure save button is hidden.
}
}
我没有测试过上面的代码,所以可能有一些错误,但它应该非常接近。使用浏览器的调试器(Chrome或FireFox)查找错误。我不得不做几个假设来测试最后一个制表符号,并且var index是制表符的索引。
为了测试,我必须拥有页面上的所有代码,但是您应该可以通过注释和调试器来弄清楚它。
+0
谢谢!我会试试这个。 – Laurie
这些按钮是动态的。我应该怎么做,使用jQuery或任何简单的脚本? – Laurie
标签部分之外的按钮?如果是这样,您可以跟踪当前选项卡,并根据当前选项卡更改标签和/或启用每个标签。 IOW,当你改变标签时,你可以在其上设置启用/禁用状态。在选项卡1上时,prev被禁用。 @Laurie:在最后一个选项卡上,将下一个按钮的标签更改为“保存”或“提交”或任何您需要的标签。或者更好的是,当你在最后一个选项卡上时,隐藏下一个按钮,并使保存按钮(type ='submit')可见。 –
我注意到按钮指的是一个php文件。我会完全删除它,只是使用jQuery绑定到点击事件,除了“保存”按钮,你实际上想提交给服务器。 –