einen Schritt in einer Form jQuery mehrt überspringen

Question

ich eine Standard-Multipart-Form haben ...

<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">&nbsp;</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> 

Und ich bin mit jQuery um die Form zu navigieren - alles funktioniert gut, aber ich versuche, überspringen ein Schritt, basierend auf einem Menü ausgewählte Option

item_required 

ich die Funktion: function chgAction(), die die ‚aktuellen‘ var alles schön und gut aktualisiert, aber die Form keinen Schritt, die var Änderungen überspringen, aber es ist so, als würde der nächste Knopf die Änderung in der 'aktuellen' Var nicht aufnehmen.

$(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; 

}

ich jquery-1.11.2 bin mit, würden alle Hinweise von großem Nutzen sein.

Danke

Answer 1

Ich habe jetzt das sortiert. Anstatt eine onClcik in der Formularauswahl zu verwenden, habe ich diese Funktion entfernt und eine if-Anweisung hinzugefügt, die auf der Menüauswahl basiert, auf den Schaltflächen. Jetzt funktioniert ein Leckerbissen. So ist der fertige JavaScript-Code wie folgt ...

$(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; 
} 

Jetzt funktioniert ein Leckerbissen.