how to submit a form without rerload or redirect the page ?

i have a web page with multi forms how can i submit any of this forms without reload or redirect the page?

i don't need to get the response from the target page any way

<form>
<input type="text" name="text1" />
<input type="text" name="text2" />
<input type="text" name="text3" />
<input type="submit" name="submit1" />
<input type="submit" name="submit2" />
<input type="submit" name="submit3" />
</form>

<form>
<input type="text" name="text1" />
<input type="text" name="text2" />
<input type="text" name="text3" />
<input type="submit" name="submit1" />
<input type="submit" name="submit2" />
<input type="submit" name="submit3" />
</form>

<form>
<input type="text" name="text1" />
<input type="text" name="text2" />
<input type="text" name="text3" />
<input type="submit" name="submit1" />
<input type="submit" name="submit2" />
<input type="submit" name="submit3" />
</form>

HTML:

 

Use jQuery and AJAX
Submit A Form Without Page Refresh using jQuery

This is all you need. Just change the formdata variable if you want to send a custom query string.

<script type='text/javascript' src='jquery.min.js'></script>
<script type="text/javascript">
	$(document).ready( function () {
		$('form').submit( function () {
			var formdata = $(this).serialize();
			$.ajax({
			    type: "POST",
			    url: "submit.php",
			    data: formdata,
			 });
			return false;
		});
	});
</script>

HTML:

 

thank you "Cash Nebula" for your time but how to use this function ?

 

You're welcome

If you're not using a local copy of jQuery, change the first line to this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

Code (markup):

Also, take the comma off the end of this line data: formdata, My mistake

Put the code in the head section, and change submit.php to the link where you send the form data.

It will look something like this:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready( function () {
		$('form').submit( function () {
			var formdata = $(this).serialize();
			$.ajax({
			    type: "POST",
			    url: "http://www.example.com/submit.php",
			    data: formdata
			 });
			return false;
		});
	});
</script>
</head>
<body>
<form>
<input type="text" name="text1" />
<input type="text" name="text2" />
<input type="text" name="text3" />
<input type="submit" name="submit1" />
<input type="submit" name="submit2" />
<input type="submit" name="submit3" />
</form>
</body>
</html>

HTML:

 

How do you display a confirmation message? Code worked perfectly btw...

 

Use the AJax can to this.

Such as Jquery and Prototype.

 

This is an old thread but it totally saved me 9 years later, thank you very much!!!

 

Such as Jquery and Prototype.

 

AJAX

 

Thank you! These instructions really help me.
I would like to add that if you want to submit these forms without reloading or redirecting the current page, you can use fetch (if you want to submit data asynchronously and control this request with js). You can also use a hidden iframe (if you want to preserve standard HTML form submission behavior).