Stop publishing an HTML5 form, refresh, or open a new onSubmit window

Question

I use the HTML5 form tag for the client-side validation engine built into it, but I do not want it to pass something, because instead I got a Javascript function.

How can I stop the Post form method.

Cheers - Kai

Answer 1

add return false after calling the function, for example:

<input .... onclick="function();return false;" /> 

or you can simply return true / false from the function as follows:

 <input .... onclick="return function()" /> 

Answer 2

If you use jQuery, you can do:

 $('#your_form_id').submit(function(e){ e.preventDefault(); // do your staff }); 

You can also do this without a border:

 document.getElementById('your_form_id').addEventListener('submit' function() { // do your staff return false; }); 

In the section // your staff, you can write your ajax code.

Answer 3

I prefer to leave my functions as they are and add return false to the onsubmit handler, for example:

 <form onsubmit="aFunction(); return false;"> 

Answer 4

Add the onsubmit property to your form tag:

 <form onsubmit="return myfunction()"> 

make sure you return bool for your function

 function myfunction() { // do your validation if (validation.passes) { // you will need to change this line !!! return true; // to submit } else { return false; // to prevent submit } } 

Answer 5

Add an onsubmit handler to your form, for example

 <form method="POST" onsubmit="return sendForm();"> 

Then define the function and add false as the return value:

 function sendForm() { //do your ajax request... return false; } 

Answer 6

I tried all your solution, but it still reloads the page after the ajax process:

 <form id="form2" method="POST" onsubmit='sent(); return false;' > function sent(){ $.ajax({ ... }); }