prevent page from reloading after form submit

Question

Is there a way to detect and stop if page is reloading.

I have a page which is getting reloaded after successful submission of a form present in it. I want to have an event listener which sees if page is reloading and should stop it from being reloaded.

I cannot return false; for sucessful submit of registration form

Solution 1

In your html:

<form onsubmit="myFunction()">
    Enter name: <input type="text">
    <input type="submit">
</form>

In your javascript:

myFunction = function(e) {
    // prevents default action to happen
    e.preventDefault();
    // do what ever you want to do here
    // i.e. perform a AJAX call
}

Solution 2

You would have to submit the form using AJAX to avoid refreshing the entire page.

This can be accomplished with regular Javascript but is made easier with jQuery http://api.jquery.com/jquery.ajax/

Solution 3

In that case you'll need to implement the form sending mechanics via some kind of AJAX call.

Because sending a form is actually loading a new page with some parameters (which are the form data).

Solution 4

Detecting if the page is reloading is a very dirty solution.

You have to prevent the default action

<script>
$( "a" ).click(function( event ) {
  event.preventDefault();
});
</script>

http://api.jquery.com/event.preventdefault/

View more solutions

Comments

[epascarello]

What do you want? Do you want the form to submit, but the page to not change/leave?

[Artur Noetzel]

For this to work you have to pass the event when calling the function, like this: <form onsubmit="myFunction(event)">