How to prevent refresh of a browser window when a request is already been posted but the response is yet to come?

Question

Let say I have a HTML form and a submit button. When I click the submit button I submit a post request to the server for processing.

How do I prevent a refresh of the page while the request is been processed by the server. Please note that the server has not returned any response yet and the spinner is still spinning in the browser. This is the time where I want to disable refresh as the current request is still in process.

I have implemented POST/REDIRECT/GET , but the issue is that even before the server redirects , and if the request is still in process , then I want to disable the refresh till the server redirects the request.

Answer 1

you need to event.preventDefault() to prevent refresh of page

<form action="#" method="post" onsubmit="return ValidationEvent()">
...
...
<script>
function ValidationEvent(event) {
event.preventDefault(); //prevent refresh of page

// your ajax api call here
}
</script>