Question

我在我的MVC3项目中使用Wizard-Step，现在只需两步即可，但我想在其中添加第三步。

但是，我仍然希望在第二步中提交表单。这就是我的Wizard-step 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 () {
        });
    }

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

1 个答案: