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 :

Published September 18, 2021 | Tags :

Post Your Questions on our forum

Post a question on Forum

Ajith Jojo Joseph

Self taught, dedicated young entrepreneur with many licensed products under his sleeve. Passionate about technology, business and excellence in general.

Share with your friends:

Comments are closed.