how to submit a form using ajax without page refresh?

In this submit form using ajax without page refresh tutorial, We are going to tell you how to submit a simple php form without page refresh using jquery ajax and after form submitting it will display you all the data records from mysql database into html table. step by step learn to Submit a form without page refresh using jQuery, Ajax, PHP and MySQL

Steps to submit a form without refreshing the page

In this Post We Will Explain About is Jquery Ajax Form Submit examples using PHP With Example and Demo.

1. Create HTML form

Let’s create a Simple HTML contact form which all the Data contains the user name, user email and user message fields. Create an HTML page name “index.html”.

<html>
 
<head>
  <title>Form submit without refresh</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
 
</head>
 
<body>
  <div id="container">
    <form method="post" action="" id="contactform">
      <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" class="form-control" id="name">
      </div>
      <div class="form-group">
        <label for="email">Email Address:</label>
        <input type="email" class="form-control" id="email">
      </div>
      <div class="form-group">
        <label for="message">Message:</label>
        <textarea name="message" class="form-control" id="message"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
 
    <div class="result">
    </div>
  </div>
</body>
 
</html>

Step 2: Call Ajax method(Ajax script to submit form)

Now we call the ajax method to submit the form without refresh. You can also validate the form using jQuery validations.

<script>
  $(document).ready(function () {
    $('.btn-primary').click(function (e) {
      e.preventDefault();
      var name = $('#name').val();
      var email = $('#email').val();
      var message = $('#message').val();
      $.ajax
        ({
          type: "POST",
          url: "ajaxsubmit.php",
          data: { "name": name, "email": email, "message": message },
          success: function (data) {
            $('.result').html(data);
            $('#contactform')[0].reset();
          }
        });
    });
  });
</script>

Step 3: Store data into database

ajaxsubmit.php
It’s time to store data into a database and Create a table in your database table name “users”.. So let’s make a file called ajaxsubmit.php to write PHP source code for data connection as well as db save it into the database.Create an php file name “ajaxsubmit.php” for submit data in users Database table.

<?php
//Database connection
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$db = 'ajaxsubmit';
$conn = mysqli_connect($dbhost, $dbuser, $dbpass , $db) or die($conn); 
 
//insert into database
if(!empty($_POST)) {
 $name = $_POST['name'];
 $email = $_POST['email'];
 $message = $_POST['message']; 
 mysqli_query($conn, "insert into users (name, email, message) values ('$name', '$email', '$message')"); 
 
 echo "User Name : ".$name."</br>";
 echo "User Email : ".$email."</br>";
 echo "User Message : ".$message."</br>";
}
?>

Read :

Read Also:  PHP Ajax Form Validation without page refresh

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about submit form using jquery ajax without page refreshs.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.