Submit form with Ajax and jQuery without reloading page

Introduction

Howdy friends, these days when people fill out a form on webpages they want an instant response!

So today in this article, we will show you how to submit form with Ajax and jQuery without reloading the page. Yup! your form will be submitted but the webpage won’t refresh at all. To achieve this we will use our trusted jQuery and Ajax.

But Ajax is the key here!

Because it allows us to send and receive data without refreshing our webpage. Don’t worry I will explain it in detail in the next section.

You can use our code in combination with PHPMailer or Sendgrid to send emails as well. And send emails without any refresh or reload. Meaning with Ajax form submit without refresh, you can build applications where you can submit the form and display the results on the same page.

Anyway, let’s learn the basics first of jQuery and Ajax.


Powerful Combo of jQuery + Ajax

Modern web development won’t exist without JavaScript. And jQuery is one of the most used JS libraries you can think of in modern web development. But ever since its release Ajax has joined its ranks because of vital things we can do with Ajax.

Remember, Ajax also called Asynchronous JavaScript And XML is not a framework or library, or even a language itself. Instead, Ajax is a web development technique to send and receive data asynchronously. If want to know more read this MDN article about Ajax.

How AJAX works behind the scene

Could we simply use Ajax without jQuery?

The answer is: YES! But no one does that unless you want to write verbose Ajax submit form PHP code. jQuery makes writing Ajax simpler and more fun.

Now that we know why we are going to submit form with Ajax and jQuery together. Let’s go into the coding section:


UI Code of HTML Form

First, we must design the UI. With Bootstrap handling CSS, we will design our UI which look like this:

How UI should look for the jQuery submit form with Ajax

To build our UI, our main file is: “index.html“.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery submit form with Ajax</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <h3 class="py-2 text-center mb-4">jQuery Submit Form with Ajax</h3>

  <div class="container">
    <div class="card mx-auto p-3" style="width: 20rem;">

      <div class="card-body">
        <form action="post.php" id="submitform" method="post">
          <div class="input-group mb-4">
            <span class="input-group-text"><i class="large material-icons">account_circle</i></span>
            <input type="text" class="form-control" placeholder="Username" name="username">
          </div>

          <div class="input-group mb-4">
            <span class="input-group-text"><i class="large material-icons">email</i></span>
            <input type="email" class="form-control" placeholder="Email Address" name="email">
          </div>

          <div class="input-group mb-4">
            <span class="input-group-text"><i class="large material-icons">fingerprint</i></span>
            <input type="password" class="form-control" placeholder="Password" name="password">
          </div>

          <div class="text-center">
            <button type="submit" class="btn btn-success" name="submit">Submit</button>
          </div>
        </form>
      </div>

      <div class="result text-center"></div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

At this point in time, our UI will look like this for our jQuery Submit form with Ajax. Next, we code the logic that makes our form get submitted without any reloading.

Take a break and watch some fantastic isekai anime from our list.


The logic of Submitting Form without reload

As we explained at the start, Ajax is the main technique to send our data to the server and receive data at the same time. Then we display this data at UI.

  • We use the submit() jQuery function to submit our form. However, we need to provide an id to identify our form.
  • Next, we inject the event.preventDefault() function which removes the default functionality of the submit button click.
  • jQuery Ajax function $.ajax() or jQuery.ajax() is the main function which send or receive data. It has certain argument requirements like
    • Type: post or get method
    • URL: Url of file such as in this case “post.php
    • data: here we write code that processes the data we receive from the form. In our jQuery submit form with Ajax, we are utilizing serialize() jQuery to collect data from the form.
$('#submitform').submit(function (event) {
   event.preventDefault();

   $.ajax({
      type: "POST",
      url: "post.php",
      data: $(this).serialize(),
       success: function (data) {
         console.log(data);
       $('.result').html(data);
      }
    });
});

Now that we completed most of the code. Let’s move to the coding part where we insert the data into the database.


PHP Code to link Database

For this form submission, we are collecting data and sending it to our MySQL database. If you want to know how to build a simple DB read this.

To insert data into MySQL we use PHP as a backed powerhouse. For that purpose, we have a simple PHP file: “post.php“.

<?php
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];

$connect = mysqli_connect('localhost', 'root', '', 'ajax_form');

$sql = "insert into form_data (username, email, password) values('$username', '$email', '$password')";

if (mysqli_query($connect, $sql)) {
  echo "Data Inserted Successfully!";
} else {
  echo "Data failed to be inserted!";
}

Now that we are almost finished with UI and Logic part of our form. Let’s move on to the SQL part.

Feel free to run the below code to build a quick SQL Table.

CREATE TABLE `form_data` (
  `id` int(11) NOT NULL,
  `username` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Below is the image of how your UI will look after we submit form without reloading the page jQuery.

How jQuery submit form with ajax look

Final process

After filling out the form you can view your submitted data in the database. Below is the image explaining how your database should look like for our Ajax Submit form PHP.

Image of Database for jQuery Submit Form with Ajax
Database for jQuery Submit Form with Ajax.

Feel free to download our code from GitHub Repo or check out the demo:


Conclusion

We hope that you enjoyed our article on how to submit forms with Ajax and jQuery. Feel free to comment on this article if you have any questions. Thank you for reading, we are always excited when one of our posts is able to provide useful information on a topic like this!

Also, check out our post about building a PHP shopping cart with the session, and if you need a payment gateway then check out the Razorpay integration guide.

Ta-da! Thanks for reading! Keep Coding.

1 thought on “Submit form with Ajax and jQuery without reloading page”

  1. Your blog is so much more than just a collection of posts It’s a community of like-minded individuals spreading optimism and kindness

    Reply

Leave a Comment