How to Prevent Unwanted Page Refreshes When Clicking Form Buttons?

How to Disable Page Refresh When Clicking Buttons within a Form

When working with buttons within a form, it's common to encounter an issue where clicking the button triggers an undesired page refresh, resetting the page's previous state. This refresh can occur when buttons are used to call functions or perform specific actions, causing the browser to submit the form automatically.

To prevent this unwanted behavior, you can modify the button's type attribute to "button" instead of its default value, which is "submit." The default "submit" type causes the form to self-post when the button is clicked, leading to the page refresh.

By setting the type to "button," you can disable the form's automatic submission and allow the button to call the desired function without affecting the page's state:

<form method="POST">
    <button name="data" type="button" onclick="getData()">Click</button>
</form>

With this modification, clicking the "Click" button will trigger the "getData()" function without causing the page to refresh. The previous request's results will be preserved, and the current page's state will remain unaffected.

The above is the detailed content of How to Prevent Unwanted Page Refreshes When Clicking Form Buttons?. For more information, please follow other related articles on the PHP Chinese website!