How to prevent from refreshing after submitting?

Question

I got this code right here which executes the function validate() when submit is clicked. The function changes some of the text in the page. But I can't see the effect because the page automatically refreshes after submission:

<form name="myForm" onsubmit="validate(); return false;">
    Age: <input type="text" name="age" />
    Height (meters): <input type="text" name="height" />
    Weight (kilograms): <input type="text" name="weight" />
    <input type="submit" value="Submit">
</form>

How do I prevent the page from reloading after each submission?

Most probably you have errors in your `validate` function. Check the console. — VisioN, Feb 20 '13 at 08:35
nope. no errors at all. The code works flawlessly when I use Chrome's developer's console. — Kevin Lloyd Bernal, Feb 20 '13 at 08:37
Then it should work perfectly well: http://jsfiddle.net/sFKch/. — VisioN, Feb 20 '13 at 08:39

score 0 · Answer 1 · answered Feb 20 '13 at 08:38

0

You can use a test button inside your form

<input type="button" value="Test button" onclick="validate();">

Once solved, remove the button.

You can also use Firebug (or equivalent) to add a breakpoint in your javascript code.

answered Feb 20 '13 at 08:38

Salvatorelab

11,614
6
53
80

score 0 · Answer 2 · answered Feb 20 '13 at 08:39

The submit event fired by your form automatically initiates the form action. If no form action is declared, it refreshes the page. Your need to prevent this default action from occuring before validation, then submit the data after it has passed validation.

Add preventDefault() to your validation code.

score 0 · Answer 3 · answered Feb 20 '13 at 08:40

0

Make sure you add return false; in your validate() function.

That will prevent the form to be submitted.

Example :

 function validate() {
     //Validation code goes here
     return false;
 }

answered Feb 20 '13 at 08:40

Rudy Lee

438
5
18

No it won't unless `return validate()` is used. In this case not needed since there is a return false in the inline event handler – mplungjan Feb 20 '13 at 08:41
thanks! I made the form into: `onsubmit="return validate();"` and added a `return false;` to the validate(). It works now! :D – Kevin Lloyd Bernal Feb 20 '13 at 08:53
It should have worked with the `;return false"` in the onsubmit too – mplungjan Feb 20 '13 at 08:58

How to prevent from refreshing after submitting?

3 Answers3