Calling change event on browser back event

Question

In .cshtml page,

<section>
    <label class="select">
        @if (itm.OutOfStock)
        {
            <select class="form-control" id="itm_SelectedQty" name="itm.SelectedQty" disabled="disabled">
                <option value=""></option>
            </select>
        }
        else
        {
            @Html.DropDownListFor(m => itm.SelectedQty, itm.QtyChoices, "", new { @class = "form-control" })
        }
        @Html.HiddenFor(m => itm.MenuItemId, new { @class = "itm_MenuItemId" })
        @Html.HiddenFor(m => itm.ItemAmount, new { @class = "itm_ItemAmount" })
        <i></i>
    </label>
</section>

And the following jQuery code is getting called, on change:

 $('.form-control').change(function () {

    var selectedQty = this.value;

 }); 

How can I call this same on change function, when someone clicks on browser's back button?

Answer 1

You can't really tell that the back button was clicked, from the request...

One solution is to use window.history

The other option is to add an isDirty variable to you page. This variable will be included in your request, so you can use it to detect if the page is dirty (i.e. back button has been clicked):

Add a hidden variable to your form:

/* I am using bootstrap, d-none would hide the input */
<input type="text" value="0" id="isDirty" class="d-none" />

Then in your JavaScript code (I am using jQuery), set the value of isDirty to 1

$(document).ready(function ($) {
    var isDirty = $('#isDirty');

    if (isDirty.length) { //<-- is dirty is defined

        // if user click the back button, isDirty is 1, call your function here
        if (isDirty.val() === "1") {
            // call whatever function you want to run on back button click
        }
        else {
            isDirty.val("1");  // <-- set isDirty to 1
        }
    }
});