添加第三步到我的向导步骤Jquery代码

Question

我在我的MVC3项目中使用向导步骤，现在是两步，但我想要添加第三步到它。

但是，我仍然希望在第二步中提交表单。 这是我的向导一步jQuery代码的样子：

$(function() { 

     $(".wizard-step:first").fadeIn(); // show first step 


     // attach backStep button handler 
     // hide on first step 
     $("#back-step").hide().click(function() { 
      var $step = $(".wizard-step:visible"); // get current step 
      if ($step.prev().hasClass("wizard-step")) { // is there any previous step? 
       $step.hide().prev().fadeIn(4500); // show it and hide current step 

       // disable backstep button? 
       if (!$step.prev().prev().hasClass("wizard-step")) { 
        $("#back-step").hide(); 
       } 
      } 
     }); 


     // attach nextStep button handler  
     $("#next-step").click(function() { 

      var $step = $(".wizard-step:visible"); // get current step 
      var validator = $("form").validate(); // obtain validator 
      var anyError = false; 
      $step.find("select").each(function() { 
       if (!this.disabled && !validator.element(this)) { // validate every input element inside this step 
        anyError = true; 
       } 


      }); 
      $step.find("input").each(function() { 
       if (!validator.element(this)) { // validate every input element inside this step 
        anyError = true; 
       } 


      }); 

      if (anyError) 
       return false; // exit if any error found 




      if ($step.next().hasClass("confirm")) { // is it confirmation? 
       // show confirmation asynchronously 
       $.post("/wizard/confirm", $("form").serialize(), function (r) { 
        // inject response in confirmation step 
        $(".wizard-step.confirm").html(r); 
       }); 

      } 

      if ($step.next().hasClass("wizard-step")) { // is there any next step? 
       $step.hide().next().fadeIn(4500); // show it and hide current step 
       $("#back-step").show(); // recall to show backStep button 
      } 

      else { // this is last step, submit form 
       $("form").submit(); 
       } 

       return false; 

      } 


     }); 

    }); 

任何解决方案的高度赞赏。

Answer 1

使用一个索引变量，然后在第2步提交表单，并张贴结果在第三步

例如...我张贴一些这里参考我的项目的代码......

if (indexer < 2 && $step.next().hasClass("wizard-step")) { 
     $step.hide().next().fadeIn(); 
     indexer++; 
     ShowStep(); 
    } 
    else { 
     $.post(paths + "/Auction/Post", $('form').serialize(), function (data) { 
      alert(data); 
     }) 
     .complete(function() { 
     }); 
    }