Home » how to submit a form using ajax without page refresh?

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:  Facebook graph api multiple keyword search

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  MySQL Full Text Search Laravel Tutorial With Example
  2. Read Also:  Files Uploading on Amazon S3 server using Laravel 5.4 Part-1
  3. Read Also:  JavaScript setInterval and clearInterval function
  4. Read Also:  Get PHP Session Value using AJAX/Jquery
  5. Read Also:  laravel findOrFail Eloquent Query
  6. Read Also:  PHP Ajax Form Validation without page refresh
  7. Read Also:  jQuery Removing All Spaces From String
  8. Read Also:  Multiselect dropdown with checkboxes demo code in php
  9. Read Also:  Laravel 6 Guzzle HTTP Client Request Example
  10. Read Also:  Simple Laravel Log Viewer API Example

Leave a Comment

Your email address will not be published. Required fields are marked *