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 : 

Ajith Jojo Joseph

Hire Me for Freelancing $30/Hour ,
Contact via email : [email protected]

Share with your friends:

Comments are closed.

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