Question

我构建了一个完美运行的多形式但...

我想创建一种情况，如果用户在选择框中选择特定值，表单将跳过一个步骤。意思是...... 假设在步骤2，在选择框中，用户从两个选项中选择第二个选项通过单击下一个btn，我希望表单跳过第3步并直接跳到第4步。

怎么做!!!我似乎无法解决问题拜托，你的帮助

这是HTML：

<body>
   <form id='sample_form'>
       <fieldset>
<div><h2 class="title">שלב I - בחר את סוג המוצר והכנס את פרטי הסוכן שלך</h2></div><div><label class="title">סוג המוצר:</label>
                <select name="product_type" id='product_type' class='required'">
                <option value="">בחר סוג מוצר</option>
                <option value="managers_insurance">ביטוח מנהלים</option>

                <option value="education_fund">קרן השתלמות</option>

                <option value="fund">קופת גמל</option>

                <option value="savings_policy">פוליסת חיסכון</option>

                <option value="self_employed_compensation">תגמולים לעצמאים</option>

                <option value="comparison">השוואה</option>

                <option value="pension fund">קרן פנסיה</option>
            </select>
            </div>
            <p id="invalid-requested_amount" class="error_msg"></p>
            <div>
                <label class="title">שם הסוכן</label>
                <input type="text" name="agent_name" id='agent_name' class='required' minlength="2" data-msg-required="שדה חובה! אנא הכנס את שמך המלא" maxlength='128'>
            </div>
            <p id="invalid-first_name" class="error_msg"></p>
            <div>
                <label class="title">מס' הסוכן</label>
                <input type="text" name="agent_number" id='agent_number' minlength="2" maxlength='10'>
            </div></br>
            <div>
                <label class="title">מס' רשיון סוכן</label>
                <input type="text" name="agent_license" id='agent_license' class='required' data-msg-required="לא הוכנס מספר רשיון">
            </div>
            <p id="invalid-email" class="error_msg"></p>
            <div>
                <label class="title">חברה מבטחת/מקבלת (במקרה של ניוד)</label>
                <input type="text" name="new_company" id='new_company' class='required' data-msg-required="אנא הכנס שם חברה מקבלת/מבטחת">
            </div>
            <p id="invalid-home_phone" class="error_msg"></p>
</fieldset>
<fieldset>
    <div><h2 class="title">שלב II - בחר את סוג הטפסים הנדרש</h2></div>

    <div>
        <label class="title">בחר את סוג הטפסים להם אתה זקוק</label>
                <select name="forms_type" id='forms_type' class='required border' data-msg-required="אנא בחר סוג טפסים">
                    <option value="">בחר סוג טפסים</option>
                    <option value="new_plan">טפסים לתוכנית חדשה בלבד</option>
                    <option value="transfer_plan">טפסים לתוכנית חדשה+ניוד תוכנית קיימת</option>
                </select>
    </div>
    <p id="invalid-birth_date" class="error_msg"></p>
</fieldset>
.
.
.

这是JS：

(function($) {
    $.fn.formToWizard = function(options) {
        options = $.extend({  
            submitButton: "" 
        }, options); 

        var element = this;

        var steps = $(element).find("fieldset");
        var count = steps.size();
        var submmitButtonName = "#" + options.submitButton;
        $(submmitButtonName).hide();

        // 2
        $(element).before("<ul id='steps'></ul>");

        steps.each(function(i) {
            $(this).wrap("<div id='step" + i + "'></div>");
            $(this).append("<p id='step" + i + "commands'></p>");

            // 2
            var name = $(this).find("legend").html();
            $("#steps").append("<li id='stepDesc" + i + "'>Step " + (i + 1) + "<span>" + name + "</span></li>");

            if (i == 0) {
                createNextButton(i);
                selectStep(i);
            }
            else if (i == count - 1) {
                $("#step" + i).hide();
                createPrevButton(i);
            }
            else {
                $("#step" + i).hide();
                createPrevButton(i);
                createNextButton(i);
            }
        });

        function createPrevButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Back</a>");

            $("#" + stepName + "Prev").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i - 1)).show();
                $(submmitButtonName).hide();
                selectStep(i - 1);
            });
        }

        function createNextButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>");

            $("#" + stepName + "Next").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i + 1)).show();
                if (i + 2 == count)
                    $(submmitButtonName).show();
                selectStep(i + 1);
            });
        }

        function selectStep(i) {
            $("#steps li").removeClass("current");
            $("#stepDesc" + i).addClass("current");
        }

    }
})(jQuery);

多表单跳过步骤

0 个答案: