Submit Form Without Refreshing Page PHP and Javascript
Hello Everyone,
In this tutorial, we are going to learn, How to submit a form without reloading. yeah, that’s so simple .. with the help of a small javascript we can able to make it. Sounds interesting? let’s make it.
First, you have to create your HTML form. here is the sample code.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Send Mail</title> </head> <body> <h3> Send Email using SMTP </h3> <form action="mail.php" method="post" id="form"> <label for="name">Your Name</label> <input type="text" name="name" placeholder="Enter Name"> <br> <label for="lname">Email</label> <input type="email" name="email" placeholder="Enter Email"> <br> <label for="message">Message</label> <textarea name="message" placeholder="Enter Message" rows="3"> </textarea> <br> <label for="name">Your Mobile</label> <input type="text" name="mobile" placeholder="Enter Mobile"> <br> <button type="submit" id="submit"> Send Email </button> </form> <div id="response"></div> <!---- here you can see the response after submiting ---> </body> <html>
Once you made the form you have to add the jquery library into it, here is the Jquery CDN link add this inside the header
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
That’s cool now we have to add our javascript into it .. place this code on the footer.
<script> $("#submit").click( function() { $.post( $("#form").attr("action"), $("#form :input").serializeArray(), function(info) { $("#response").empty(); $("#response").html(info); }); $("#form").submit( function() { return false; }); }); </script>
That’s done. yeah, we are near to it. now we have to make the form action file.. in our case its mail.php
<?php // giving response to html form echo "Form submitted successfully "; // you can do whatever you want here ?>
Fine, we did it .. test it now .. it will work perfectly ..
If you want a detailed explanation you can check out my video, you will get a better understanding . also you can download the source code from this website.
Download Source Code :Â
Post Your Questions on our forum
Post a question on Forum
Share with your friends:
Export html table to excel, pdf, csv format using Datatable
Do you know how to export html table to excel, pdf, CSV, or excel format using Datatable? If you don’t […]
August 4, 2022
Instagram Hashtag API PHP and JavaScript Integration with RapidAPI
Do you know how to integrate Instagram Hashtag API with your website? In this tutorial, I will show you how […]
August 2, 2022
How to host React Application into Cpanel – Routes not working Htaccess fix
Do you know how to host react applications into Cpanel? After building your react application. you will get an index.html […]
July 28, 2022
How to get user Public IP Address using Javascript
Do you know how to get the user IP address using javascript? I will show you how. Today we are […]
July 27, 2022
Digital Marketing Toolkit
Get Free Access to Digital Marketing Toolkit. You can use all our tools without any limits
Get Free Access Now