Submit form with Ajax and jQuery without reloading page.pdf

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

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/bootstrap@5.2.2/dist/css/bootst
rap.min.css" rel="stylesheet">

<input type="email" class="form-control"
placeholder="Email Address" name="email">
</div>
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>

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` (
ìd` int(11) NOT NULL,
ùsername` varchar(255) NOT NULL,
èmail` 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.
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!

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.

Submit form with Ajax and jQuery without reloading page.pdf

Recommended

Recommended

More Related Content

Similar to Submit form with Ajax and jQuery without reloading page.pdf

Similar to Submit form with Ajax and jQuery without reloading page.pdf (20)

Recently uploaded

Recently uploaded (20)

Submit form with Ajax and jQuery without reloading page.pdf