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 : 

Share with your friends:

Ajith Jojo Joseph

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

HTML Form to Email Using JavaScript and SMTP server 🚀

Hello Everyone, 🙋‍♂️ In this tutorial, we are going to look at how to send emails from HTML Form to […]

22 September, 2021

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 […]

18 September, 2021

HTML to PDF Convertor easiest way using Javascript

Hello everyone,  in this tutorial we are going to learn how to make an HTML to PDF converter. In this […]

3 September, 2021

How to create a Girlfriend by using AI and javascript

Hey guys, Today we are going to make an AI chatbot using javascript and some API’s. Let me explain how […]

10 July, 2021

Newsletter

Subscribe to our weekly Newsletter and stay tuned.


Free PHP Invoicing Software

Gmax CRM Lite is an Invoicing and project management tool for small businesses, features including client management , invoicing , quotation and project management

Download for free