jQuery is not clearing the input in production environment but works in local environment in ASP.NET MVC 4.8

Question

I have a form in ASP.NET MVC 4.8 app. When user submit the page , user migrated to another page. Upon clicking on the back button from the browser user get back to same previous page. In this page there is a logic written in jQuery which clears the textboxes, reset the radio button. So it works as expected but when I deploy the app and when user clicks the back arrow button from the browser then page shows all the values. Nothing get clear.

Here is the code

  @section Scripts{
<script language="javascript">



    $(document).ready(function () {
       
        $("#Email").val('');
        $("#Phone").val('');
        $("#Final").val(""); //I added the double quotes purposely to check if that works. 
     }
   }

I cleared the cache and tried.

Answer 1

Some browsers don't re-run your scripts when a back/forward button is pressed. To detect when a user clicks on back/forward buttons, you can listen to pageshow or pagehide events instead of $(document).ready(). Try this

$(window).on('pageshow', function () {
    $("#Email").val('');
    $("#Phone").val('');
});