我有一个标准的多部分表格......
<form action="" method="post" class="form-horizontal form" id="dsa_form" name="dsa_form">
<div class="step">
<fieldset>
<legend>Your Details</legend>
<div class="form-group"><label for="your_name" class="col-sm-2 control-label">Your Name </label></div>
<div class="col-sm-10"><input type="text" name="your_name" class="form-control" id="your_name" placeholder="Full Name" tabindex="1"></div>
</fieldset>
</div>
<div class="step">
<fieldset>
<legend>Item Details</legend>
<div class="form-group"><label for="the_name" class="col-sm-2 control-label">Name of Item *</label></div>
<div class="col-sm-10"><input type="text" name="the_name" class="form-control" id="the_name" placeholder="" tabindex="1"></div>
</fieldset>
</div>
<div class="step">
<fieldset>
<legend>type Required</legend>
<div class="form-group"><label for="item_required" class="col-sm-2 control-label">What item do you require (Please select) *</label></div> <div class="col-sm-10"> <select name="item_required" class="form-control" onChange="chgAction()"> <option value="NOT SELECTED" selected="selected">Please Select...</option> <option value="Full">Full</option> <option value="Half">Half</option> </select></div>
<div class="form-group"><label for="item_weight" class="col-sm-2 control-label">weight of item</label></div>
<div class="col-sm-10"><input type="text" name="item_weight" class="form-control" id="item_weight" placeholder="" tabindex="1"></div>
</fieldset>
</div>
<div class="step">
<fieldset>
<legend>half colour</legend>
<div class="form-group"><label for="half_colour" class="col-sm-2 control-label">Hull/Machinery/Gear/Equipment only</label></div>
<div class="col-sm-10"><input type="number" name="half_colour" class="form-control qtymath" id="half_colour" placeholder="" tabindex="1"></div>
</fieldset>
<div class="10pxspacer"> </div>
</div>
<div class="step">
<fieldset>
<legend>Questionnaire</legend>
<div class="form-group"><label for="ssqone" class="col-sm-2 control-label">what do you need the item for?</label></div>
<div class="col-sm-10"><input type="text" name="ssqone" class="form-control" id="ssqone" placeholder="" tabindex="1"></div>
</fieldset>
</div>
<div class="row">
<div class="col-sm-12">
<div class="pull-right">
<button type="button" class="action btn-sky text-capitalize back btn">Back</button>
<button type="button" class="action btn-sky text-capitalize next btn">Next</button>
<button type="submit" class="action btn-hot text-capitalize submit btn generalBut">Request Item</button>
</div>
</div>
</div>
</div>
</div>
</form>
我正在使用jQuery在表单中导航 - 一切正常，但我试图跳过基于菜单选择选项的步骤
item_required
我使用函数：函数chgAction（）更新“当前”var并且很好，但是表单不会跳过一个步骤，var会改变，但是就好像下一个按钮没有拾取更改在'当前'var。
$(document).ready(function(){
var current = 1;
widget = $(".step");
btnnext = $(".next");
btnback = $(".back");
btnsubmit = $(".submit");
widget.not(':eq(0)').hide();
hideButtons(current);
setProgress(current);
btnnext.click(function(){
if(current < widget.length){
if($(".form").valid()){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
})
btnback.click(function(){
if(current > 1){
current = current - 2;
if(current < widget.length){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
})
$('.form').validate({
ignore:":not(:visible)",
rules: {
your_name : "required",
},
});
});
setProgress = function(currstep){
var percent = parseFloat(100 / widget.length) * currstep;
percent = percent.toFixed();
$(".progress-bar").css("width",percent+"%").html(percent+"%");
}
hideButtons = function(current){
var limit = parseInt(widget.length);
$(".action").hide();
if(current < limit) btnnext.show();
if(current > 1) btnback.show();
if (current == limit) {
$(".display label:not(.control-label)").each(function(){
console.log($(this).find("label:not(.control-label)").html($("#"+$(this).data("id")).val()));
});
btnnext.hide();
btnsubmit.show();
}
}
function chgAction() {
var form = document.dsa_form;
console.log('chgAction()');
console.log(form.item_required.selectedIndex);
switch (form.item_required.selectedIndex) {
case 1:
current = current;
break;
case 2:
current = 5;
setProgress(5);
widget = widget+1;
break;
}
document.getElementById("demo").innerHTML = current;
}
我正在使用jquery-1.11.2，任何指针都会很有用。
由于
答案 0 :(得分：0)
我现在对此进行了排序。我没有在表格选择上使用onClcik，而是删除了该功能，并在按钮上添加了基于菜单选择的if语句。现在是一种享受。所以完成的javascript代码如下......
$(document).ready(function(){
var form = document.dsa_form;
var current = 1;
widget = $(".step");
btnnext = $(".next");
btnback = $(".back");
btnsubmit = $(".submit");
widget.not(':eq(0)').hide();
hideButtons(current);
setProgress(current);
btnnext.click(function(){
if(form.item_required.selectedIndex == 2 && current == 3) {
current = current+1;
if(current < widget.length){
// Check validation
if($(".form").valid()){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current +1);
}
}
hideButtons(current);
} else {
if(current < widget.length){
// Check validation
if($(".form").valid()){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
}
})
btnback.click(function(){
if(form.item_required.selectedIndex == 2 && current == 5) {
if(current > 1){
current = current - 3;
if(current < widget.length){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current -1);
}
}
hideButtons(current);
} else {
if(current > 1){
current = current - 2;
if(current < widget.length){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
}
})
$('.form').validate({ // initialize plugin
ignore:":not(:visible)",
rules: {
your_name : "required",
},
});
});
setProgress = function(currstep){
var percent = parseFloat(100 / widget.length) * currstep;
percent = percent.toFixed();
$(".progress-bar").css("width",percent+"%").html(percent+"%");
}
hideButtons = function(current){
var limit = parseInt(widget.length);
$(".action").hide();
if(current < limit) btnnext.show();
if(current > 1) btnback.show();
if (current == limit) {
$(".display label:not(.control-label)").each(function(){
console.log($(this).find("label:not(.control-label)").html($("#"+$(this).data("id")).val()));
});
btnnext.hide();
btnsubmit.show();
}
document.getElementById("demo").innerHTML = current;
}
现在可以享受一种享受。