Preventing form submission when a user reloads a page can be useful to avoid unintended data resubmission. You can achieve this using the Post/Redirect/Get (PRG) pattern along with JavaScript. Here’s how you can do it:

Server-side Handling (Post/Redirect/Get Pattern): When the form is submitted, process the data on the server, perform the necessary actions, and then redirect the user to a different page using the HTTP 303 See Other status code. This way, when the user reloads the new page, they won’t be resubmitting the form data.For example, in PHP, you can achieve this as follows:

// Process the form data
// ...

// Redirect to a different page
header("Location: /success-page", true, 303);
exit();

<form id="myForm" action="/submit" method="post">
    <!-- Your form fields here -->
    <button type="submit" id="submitButton">Submit</button>
</form>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var submitButton = document.getElementById("submitButton");
        submitButton.addEventListener("click", function() {
            submitButton.disabled = true;
        });

        // Re-enable the button when the page is reloaded
        if (performance.navigation.type === 1) {
            submitButton.disabled = false;
        }
    });
</script>

In this example, the JavaScript disables the submit button when it’s clicked. When the page is reloaded using the browser’s reload button, the performance.navigation.type property is checked. A value of 1 indicates that the page was reloaded, so the button is re-enabled.

Please note that while these methods can help prevent unintended form submissions on reload, they might not cover all scenarios (e.g., if a user reloads using a keyboard shortcut). It’s important to design your user interface and server-side logic to handle these cases appropriately.