提交后如何防止刷新？

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?

Answer 1

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.

Answer 2

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.

Answer 3

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;
 }