How to avoid page reload in php form submission

Question

I am currently using php in my html page and there is an action in the same page which gets executed upon form submission. Currently whole form gets reloaded while I want the php action to be run in the background with out reloading. How do I do it. I would also want to clear the text box after submit button is clicked. Following is the code I am currently using

<html> <head> </head> <body> <form action="index.php" method="post" role="form"> <input type="email" placeholder="Enter email" name="email_address"> <button class="btn btn-primary custom-button red-btn">Sign Up</button> </form> <?php if(isset($_POST['email_address']) !(trim($_POST['email_address']) == '')) // do some action } ?> </body> </html>

Note: Following code worked for me

<script type="text/javascript"> $('#contactForm').submit(function () { $.post("mailer.php",$("#contactForm").serialize(), function(data){ }); return false; }); </script>

You should redirect user to other page like thanks..

Rahul Kaushik
– Rahul Kaushik

2014-04-21 11:25:23 +00:00
Commented Apr 21, 2014 at 11:25 — Rahul Kaushik
– Rahul Kaushik, Commented Apr 21, 2014 at 11:25

Praveen Kumar Purushothaman · Accepted Answer · 2014-04-21 11:26:27Z

3

You need to use AJAX for this, for without reloading. Or, if you want to do it without disturbing the page, you need to set target.

Using AJAX

$("form").submit(function(){ $.post($(this).attr("action"), $(this).serialize()); return false; });

Using `target`

<form action="index.php" method="post" role="form" target="_blank">

answered Apr 21, 2014 at 11:26

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Terry Over a year ago

I would use return false; cautiously - typically preferring e.preventDefault() because returning false will also stop event propagation, might affect other functions if you rely on event bubbling.

raju Over a year ago

$('#contactForm').submit(function () { $.post("mailer.php",$("#contactForm").serialize(), function(data){ }); return false; }); worked for me

valdeci · Accepted Answer · 2019-04-24 13:46:28Z

Using ajax

HTML

<html> <head> </head> <body> <form id="myform"><!--changge--> <input type="email" placeholder="Enter email" name="email_address"> <button class="btn btn-primary custom-button red-btn" id="signup">Sign Up</button> </form> </body> </html>

<script> $(document).ready(function() { $('#signup').click(function() { $.ajax({ url:'index.php', method:'post', data : $('#myform').serialize(), success:function() { } )}; ); }); </script>

it gave me syntax error while this worked $.post("mailer.php",$("#contactForm").serialize(), function(data){ });

sandipshirsale · Accepted Answer · 2014-04-22 03:47:02Z

You can try this

<html> <head> </head> <body> <form id="myform" action="index.php"><!--changge--> <input type="email" placeholder="Enter email" name="email_address"> <button class="btn btn-primary custom-button red-btn" id="signup"> Sign Up</button> </form> <script> $(document).ready(function(){ $('#signup').click(function(){ $.post($(this).attr("action"), $("#myform").serialize(),function(response){ alert(response) // you can get the success response return by php after submission success }); )}; });

Collectives™ on Stack Overflow

How to avoid page reload in php form submission

3 Answers 3

Using AJAX

Using `target`

2 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Using AJAX

Using target

2 Comments

1 Comment

Comments

Linked

Related

Using `target`