form steps issue

Graham Carr 277 posts 389 karma points

Nov 03, 2014 @ 09:45

I have stumbled into an issue which I find very strange and not sure why it is happening. If I set the FormStep via jQuery and click the Next button all seems to work fine except that the values are not actually stored when I submit the form or re-open it for that matter, the same happens with the Previous button. If I click Next/Previous without setting the FormStep via jQuery then it saves the values fine.

Do you have any idea why this might be happening?? For your reference this is the code I am running in a customised Form.cshtml specific to the form in question:

    <script type="text/javascript">
        $(document).ready(function () {
            $(".next").click(function () {
                if($("#b0a3522d-4daa-47f1-8760-72107507afc6").val() != null) {
                    switch ($("#b0a3522d-4daa-47f1-8760-72107507afc6").val()) {
                        case "New starter":
                            $("#FormStep").val("3");
                            $("#RequestType").val("New Starter");
                            break;
                        case "Change of personal details":
                            $("#FormStep").val("4");
                            $("#RequestType").val("Change of Personal Details");
                            break;
                        case "Contract extension":
                            $("#FormStep").val("5");
                            $("#RequestType").val("Contract Extension");
                            break;
                        case "Contract amendment":
                            $("#FormStep").val("6");
                            $("#RequestType").val("Contract Amendment");
                            break;
                        case "Leaver":
                            $("#FormStep").val("7");
                            $("#RequestType").val("Leaver");
                            break;
                        case "Maternity/Adoption leave":
                            $("#FormStep").val("8");
                            $("#RequestType").val("Maternity/Adoption Leave");
                            break;
                    }
                }
                if ($(".nextpage").val() != null) {
                    var currentPage = parseInt($(".nextpage").val(), 10);
                    $("#FormStep").val(currentPage);
                }
            });
            $(".cancel").click(function () {
                $("#FormStep").val(2);
                if ($(".previouspage").val() != null) {
                    var currentPage = parseInt($(".previouspage").val(), 10);
                    ++currentPage;
                    $("#FormStep").val(currentPage);
                }
            });
        });
    </script>

I have attached some screenshots to show the difference between when the FormStep is set via jQuery and when it is set as normal. As you can see, another issue is that the validation is hit as soon as the form step appears when the step has been set via jquery as opposed to that not happening when the form step is left as normal. For your reference the PreviousFormStep and NextPageNumber are custom fieldtypes I have created to be able to specify which page should be shown on the next and previous button clicks as per the code above.

FORM STEP SET VIA JQUERY

FORM STEP NOT SET VIA JQUERY

Flag this post as spam?

Form Steps Issue