Razor page issue .net 8

This is a Razor page issue. I have simple text box and corresponding search button created in the razor page, say it as index.cshtml.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Button Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            // Disable the button initially
            $('#searchButton').prop('disabled', true);
 
            // Enable button if text box has value
            $('#searchInput').on('input', function () {
                const inputValue = $(this).val();
                if (inputValue.trim() !== "") {
                    $('#searchButton').prop('disabled', false);
                } else {
                    $('#searchButton').prop('disabled', true);
                }
            });
        });
    </script>
</head>

and simple onGet method , which contains nothing.

The issue is: the search button is only enabled when user enters the text, which is working fine. But when the user press forward or back button of browser and reach to same page, button got disabled again, although it contains the data in the text box.

How can I resolve this?