mercredi 23 août 2017

Enable/Disable Element and validations on the page depending on user action and each others value

I have a web form page that its elements and validators needs to be enabled and disabled relative to the user's choice and each others value dynamically. I have done this using JQuery For example like this:

switch (RequestKind) {
                case "0":
                    $('.inside').find('input, select, textarea').not("#DrpRequestKind, #FileUpload, #_btnAttachFiles").prop("disabled", true).val(null);
                    $("#DrpLeaveDuration, #_DDLlocatePersonelNo, #DrpLeaveKind").addClass("ddl-disabled").val(0);
                    $("#TxtDateOF, #TxtDateTO").css("background-color", "rgb(238, 238, 238)");

                    //Enable\Disable Required validation
                    $("#VDrpLeaveKind")[0].enabled = true;
                    $("#VTxtDateTO")[0].enabled = true;
                    $("#VDrpLeaveDuration")[0].enabled = true;
                    $("#VTxtEndTime")[0].enabled = true;
                    $("#VTxtStartTime")[0].enabled = true;
                    ValidatorEnable($("#VtxtVacationDesc")[0], false);

                    break;

                case "1":

                    $('.inside').find('input, select, textarea').not("#DrpRequestKind, #FileUpload, #btnAttachFiles").prop("disabled", true);
                    $("#DrpLeaveDuration, #DrpLeaveKind").prop("disabled", true).addClass("ddl-disabled").val(0);
                    $("#TxtDateOF").css("background-color", "white").removeAttr("disabled").val(null);
                    $("#TxtDateTO").css("background-color", "white").prop("disabled", false).val(null);
                    $("#TxtStartTime, #TxtEndTime").prop("disabled", false).val(null);
                    $("#TxtlocatePersonelNo").prop("disabled", false).val(null);
                    $("#DDLlocatePersonelNo").prop("disabled", false).removeClass("ddl-disabled").css("background-color", "").val(0);
                    $("#txtVacationDesc").prop("disabled", false).val(null);

                    //Disable\Enable required validation
                    ValidatorEnable($("#VDrpLeaveKind")[0], false);
                    ValidatorEnable($("#VDrpLeaveDuration")[0], false);
                    $("#VTxtStartTime")[0].enabled = true;
                    $("#VtxtVacationDesc")[0].enabled = true;
                    break;
                case "2":

                    $('.inside').find('input, select, textarea').not("#DrpRequestKind, #FileUpload, #btnAttachFiles").prop("disabled", true).val(null);
                    $("#DrpLeaveDuration").prop("disabled", false).removeClass("ddl-disabled").val(0);
                    $("#TxtDateOF, #TxtDateTO, #DDLlocatePersonelNo").css("background-color", "rgb(238, 238, 238)");
                    $("#DDLlocatePersonelNo, #DrpLeaveKind").val(0);

                    //Enable\Disable Required validation                        
                    $("#VDrpLeaveKind")[0].enabled = true;
                    $("#VDrpLeaveDuration")[0].enabled = true;
                    $("#VTxtEndTime")[0].enabled = true;
                    $("#VTxtStartTime")[0].enabled = true;
                    ValidatorEnable($("#VtxtVacationDesc")[0], false);

                    break;
                default:
            }

above script is a simple example for impact dropdownlist change on others. Now, when a post back occurs befor submit all change reset to default. I try save the state of every element on page using sessionStorage and restore them ofter post back, but I did not succeed, becouse I can not detect this is first time the page is load or not(fist time does not have previous state). I want to know that is my sloution is right, and how can save this state and is the correct way to do this? thanks




Aucun commentaire:

Enregistrer un commentaire