Question

I am using Wizard-Step in my MVC3 project, it is two steps right now but I want to add a third step into to it.

However, I still want to submit my form in the second step.
This is how my Wizard-step Jquery code looks like:

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

            }


        });

    });

Any solutions is highly appreciated.

Answer 1

use an indexer variable then submit your form at step 2 and post the result in third step

for example… i’m posting some of my projects code here for reference…

    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 () {
        });
    }