Submit form with Ajax and jQuery without reloading page

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 wont 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. Dont 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, lets learn the basics first
of jQuery and Ajax.
Powerful Combo of jQuery Ajax
Modern web development wont 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. Lets 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.
lt!DOCTYPE htmlgt lthtml lang"en"gt ltheadgt ltmet
a charset"UTF-8"gt ltmeta http-equiv"X-UA-Compat
ible" content"IEedge"gt ltmeta name"viewport"
content"widthdevice-width, initial-scale1.0"gt
lttitlegtjQuery submit form with
Ajaxlt/titlegt ltlink href"https//cdn.jsdelivr.ne
t/npm/bootstrap_at_5.2.2/dist/css/bootst
rap.min.css" rel"stylesheet"gt
5
ltlink href"https//fonts.googleapis.com/icon?fam
ilyMaterialIcons" rel"stylesheet"gt lt/headgt
ltbodygt lth3 class"py-2 text-center mb-4"gtjQuery
Submit Form with Ajaxlt/h3gt ltdiv
class"container"gt ltdiv class"card mx-auto
p-3" style"width 20rem"gt ltdiv
class"card-body"gt ltform action"post.php"
id"submitform" method"post"gt ltdiv
class"input-group mb-4"gt ltspan
class"input-group-text"gtlti class"large
material-icons"gtaccount_circlelt/igtlt/spangt ltinput
type"text" class"form-control"
placeholder"Username" name"username"gt lt/divgt
ltdiv class"input-group mb-4"gt ltspan
class"input-group-text"gtlti class"large
material-icons"gtemaillt/igtlt/spangt
6
ltinput type"email" class"form-control"
placeholder"Email Address" name"email"gt lt/divgt
ltdiv class"input-group mb-4"gt ltspan
class"input-group-text"gtlti class"large
material-icons"gtfingerprintlt/igtlt/spangt ltinput
type"password" class"form-control"
placeholder"Password" name"password"gt lt/divgt
ltdiv class"text-center"gt ltbutton type"submit"
class"btn btn-success" name"submit"gtSubmitlt/but
tongt lt/divgt lt/formgt lt/divgt ltdiv
class"result text-center"gtlt/divgt lt/divgt lt/div
gt
7
ltscript src"https//code.jquery.com/jquery-3.6.0.
min.js"gtlt/scriptgt ltscript src"https//cdn.jsdel
ivr.net/npm/bootstrap_at_5.2.2/dist/js/bootstra
p.bundle.min.js"gtlt/scriptgt lt/bodygt lt/htmlgt
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. Lets
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.
lt?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(conne
ct, 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. Lets 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 )
ENGINEInnoDB DEFAULT CHARSETutf8mb4
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.