刷新后如何保留下拉值

Question

I'm writing a program where there are 2 drop downs and two buttons, when I select the drop down 1 and dropdown 2 and hit a start, the button has to be disabled and second has to be enabled, and also the dropdowns are to be disabled. And when I do a refresh, the state has to continue the same, Say I selected both dropdowns and hit a start, the dropdowns would be disabled and also the start would be, but the stop would be enabled, when I refresh the form after refresh, it should be the same. I'm able to use the localStorage and do it for buttons but unable to know how to do the same for dropdowns. Below is my js.

$(document).ready(function() {
    if (typeof (Storage) !== "undefined") {
        var stat = localStorage.getItem("clickStat");
        if (stat == "start") {
            $('#Start').attr("disabled", true);
            $('#Stop').attr("disabled", false);

        } else {
            $('#Start').attr("disabled", false);
            $('#Stop').attr("disabled", true);
        }
    }
    var form = $('#formSec');
    var task = document.getElementById('task');
    var subtask = $('#subtask');

    $('#Start').on("click", function() {
        if (typeof (Storage) !== "undefined") {
            localStorage.setItem("clickStat", "start");
        }
        $.ajax({
            type : "post",
            url : "UpdateStartTime",
            data : form.serialize(),
            success : function() {
                $('#task').attr("disabled", true);
                $('#subtask').attr("disabled", true);
                $('#Start').attr("disabled", true);
                $('#Stop').attr("disabled", false);
            }
        });
        return false;
    });

    $('#Stop').on("click", function() {
        if (typeof (Storage) !== "undefined") {
            localStorage.setItem("clickStat", "stop");
        }
        var form = $('#formSec');
        var task = document.getElementById('task');
        var subtask = $('#subtask');
        $.ajax({
            type : "post",
            url : "UpdateEndTime",
            data : form.serialize(),
            success : function() {
                $('#task').attr("disabled", false);
                $('#subtask').attr("disabled", false);
                $('#Start').attr("disabled", false);
                $('#Stop').attr("disabled", true);
            }
        });
        return false;
    });

});

Here is a fiddle. https://jsfiddle.net/fx9azgso/2/

Please let me know how Can I fix this.

Thanks

Answer 1

Hope this helps, I have updated the code for you, look for comments START and END tags in order to get an idea of the changes I have done.

Please see the working sample @ https://jsfiddle.net/fx9azgso/24/

Alternatively see the code below:

    $(document).ready(function() {
    /*Set the variables with appropriate references [START]*/
    var form = $('#formSec');
    var task = $('#task');
    var subtask = $('#subtask');
    /*Set the variables with appropriate references [END]*/

    if (typeof(Storage) !== "undefined") {

        /*Extract values from localStorage [START]*/
        var stat = localStorage.getItem("clickStat");
        var taskVal = localStorage.getItem("taskVal");
        var subtaskVal = localStorage.getItem("subtaskVal");
        /*Extract values from localStorage [END]*/

        if (stat == "start") {
            $('#Start').attr("disabled", true);
            task.attr("disabled", true);
            subtask.attr("disabled", true);
            $('#Stop').attr("disabled", false);

        } else {
            $('#Start').attr("disabled", false);
            task.attr("disabled", false);
            subtask.attr("disabled", false);
            $('#Stop').attr("disabled", true);
        }
    }

    /*If locaStorage values are assigned property i.e. App has been started at least once, assign values [START]*/
    if (taskVal !== null)
        task.val(taskVal);

    if (subtaskVal !== null)
        subtask.val(subtaskVal);
    /*If locaStorage values are assigned property i.e. App has been started at least once, assign values [END]*/


    $('#Start').on("click", function() {
        if (typeof(Storage) !== "undefined") {
            /*Store values in localStorage [START]*/
            localStorage.setItem("clickStat", "start");
            localStorage.setItem("taskVal", task.val());
            localStorage.setItem("subtaskVal", subtask.val());
            /*Store values in localStorage [END]*/
        }
        $.ajax({
            type: "post",
            url: "UpdateStartTime",
            data: form.serialize(),
            success: function() {
                $('#task').attr("disabled", true);
                $('#subtask').attr("disabled", true);
                $('#Start').attr("disabled", true);
                $('#Stop').attr("disabled", false);
            }
        });
        return false;
    });

    $('#Stop').on("click", function() {
        if (typeof(Storage) !== "undefined") {
            /*Store values in localStorage [START]*/
            localStorage.setItem("clickStat", "stop");
            localStorage.setItem("taskVal", task.val());
            localStorage.setItem("subtaskVal", subtask.val());
            /*Store values in localStorage [END]*/
        }
        $.ajax({
            type: "post",
            url: "UpdateEndTime",
            data: form.serialize(),
            success: function() {
                $('#task').attr("disabled", false);
                $('#subtask').attr("disabled", false);
                $('#Start').attr("disabled", false);
                $('#Stop').attr("disabled", true);
            }
        });
        return false;
    });

});