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 the 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 submission 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.
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Submit form with Ajax and jQuery without reloading page.pdf
1. Submit form with Ajax and
jQuery without reloading page
October 9, 2022 by Pawan
Table of Contents
● Introduction
● Powerful Combo of jQuery + Ajax
● UI Code of HTML Form
● The logic of Submitting Form without reload
● PHP Code to link Database
● Final process
● Conclusion
Introduction
2. 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.
3. 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:
4. 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/bootstrap@5.2.2/dist/css/bootst
rap.min.css" rel="stylesheet">
7. <script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstra
p.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 which makes our form gets submitted without
any reloading.
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. Though
we need to provide an id to identify our form.
● Next, we inject the event.preventDefault() function which
removes the default functionality of 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
8. 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.
9. 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!";
}
10. 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
11. 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.
Database for jQuery Submit Form with Ajax.
Feel free to download our code from GitHub Repo or check out the demo:
Code Download from Github 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!
12. 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.