title: skip a step in a jQuery multipart form
body: <p>I have a standard multipart form...</p>
  
  <pre><code>&lt;form action="" method="post" class="form-horizontal form" id="dsa_form" name="dsa_form"&gt;
          &lt;div class="step"&gt;
                  &lt;fieldset&gt;
                      &lt;legend&gt;Your Details&lt;/legend&gt;
                  &lt;div class="form-group"&gt;&lt;label for="your_name" class="col-sm-2 control-label"&gt;Your Name &lt;/label&gt;&lt;/div&gt;
                  &lt;div class="col-sm-10"&gt;&lt;input type="text" name="your_name" class="form-control" id="your_name" placeholder="Full Name" tabindex="1"&gt;&lt;/div&gt;
                  &lt;/fieldset&gt;
                  &lt;/div&gt;
                 &lt;div class="step"&gt;
                  &lt;fieldset&gt;
                      &lt;legend&gt;Item Details&lt;/legend&gt;
                      &lt;div class="form-group"&gt;&lt;label for="the_name" class="col-sm-2 control-label"&gt;Name of Item *&lt;/label&gt;&lt;/div&gt;
                  &lt;div class="col-sm-10"&gt;&lt;input type="text" name="the_name" class="form-control" id="the_name" placeholder="" tabindex="1"&gt;&lt;/div&gt;                      
                  &lt;/fieldset&gt;
                  &lt;/div&gt;
                  &lt;div class="step"&gt;
                      &lt;fieldset&gt;
                      &lt;legend&gt;type Required&lt;/legend&gt;
                      &lt;div class="form-group"&gt;&lt;label for="item_required" class="col-sm-2 control-label"&gt;What item do you require (Please select) *&lt;/label&gt;&lt;/div&gt; &lt;div class="col-sm-10"&gt; &lt;select name="item_required" class="form-control" onChange="chgAction()"&gt; &lt;option value="NOT SELECTED" selected="selected"&gt;Please Select...&lt;/option&gt;  &lt;option value="Full"&gt;Full&lt;/option&gt; &lt;option value="Half"&gt;Half&lt;/option&gt;  &lt;/select&gt;&lt;/div&gt;
                  &lt;div class="form-group"&gt;&lt;label for="item_weight" class="col-sm-2 control-label"&gt;weight of item&lt;/label&gt;&lt;/div&gt;
                  &lt;div class="col-sm-10"&gt;&lt;input type="text" name="item_weight" class="form-control" id="item_weight" placeholder="" tabindex="1"&gt;&lt;/div&gt;
                  &lt;/fieldset&gt;
                                      &lt;/div&gt; 
                   &lt;div class="step"&gt;
                      &lt;fieldset&gt;
                      &lt;legend&gt;half colour&lt;/legend&gt;
                  &lt;div class="form-group"&gt;&lt;label for="half_colour" class="col-sm-2 control-label"&gt;Hull/Machinery/Gear/Equipment only&lt;/label&gt;&lt;/div&gt;
                  &lt;div class="col-sm-10"&gt;&lt;input type="number" name="half_colour" class="form-control qtymath" id="half_colour" placeholder="" tabindex="1"&gt;&lt;/div&gt;
                  &lt;/fieldset&gt;
                  &lt;div class="10pxspacer"&gt;&amp;nbsp;&lt;/div&gt;  
                  &lt;/div&gt; 
                  &lt;div class="step"&gt;
                      &lt;fieldset&gt;
                      &lt;legend&gt;Questionnaire&lt;/legend&gt;
                  &lt;div class="form-group"&gt;&lt;label for="ssqone" class="col-sm-2 control-label"&gt;what do you need the item for?&lt;/label&gt;&lt;/div&gt;
                  &lt;div class="col-sm-10"&gt;&lt;input type="text" name="ssqone" class="form-control" id="ssqone" placeholder="" tabindex="1"&gt;&lt;/div&gt;
                  &lt;/fieldset&gt;
                   &lt;/div&gt; 
                  &lt;div class="row"&gt;
            &lt;div class="col-sm-12"&gt;
                &lt;div class="pull-right"&gt;
                  &lt;button type="button" class="action btn-sky text-capitalize back btn"&gt;Back&lt;/button&gt;
                  &lt;button type="button" class="action btn-sky text-capitalize next btn"&gt;Next&lt;/button&gt;
                  &lt;button type="submit" class="action btn-hot text-capitalize submit btn generalBut"&gt;Request Item&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;          
      &lt;/div&gt;
    &lt;/div&gt; 
              &lt;/form&gt;
  </code></pre>
  
  <p>And I'm using jQuery to navigate around the form - all works fine, but i'm trying to skip a step based on a menu selected option </p>
  
  <pre><code>item_required
  </code></pre>
  
  <p>I using the function: function chgAction() which updates the 'current' var all well and good, but the form does not skip a step, the var changes, but its as if the next button is not picking up the change in the 'current' var.</p>
  
  <pre><code>    $(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 &lt; widget.length){
              if($(".form").valid()){
                  widget.show();
                  widget.not(':eq('+(current++)+')').hide();
                  setProgress(current);
              }
          }
          hideButtons(current);
      })
      btnback.click(function(){
          if(current &gt; 1){
              current = current - 2;
              if(current &lt; 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 &lt; limit) btnnext.show();
      if(current &gt; 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;
  </code></pre>
  
  <p>}</p>
  
  <p>I'm using jquery-1.11.2, any pointers would be of great use.</p>
  
  <p>Thanks</p>