How to Submit form by jQuery Ajax in HTML
Sometimes when you are making websites, people will tell you what they want the website to do. For example, some people might want their sign-up page to be submitted without refreshing the webpage. But is that possible? Well in this article I am going to show you how to submit form without reloading page by jquery ajax in html!
Contents :
What is jQuery ?
jQuery is a lightweight, write less, do more, JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website by simplifying common tasks, It has simplified many of the complicated functions that used to exist in JavaScript like AJAX requests and DOM-related functions.
Features of jQuery
Here are some of the key features jQuery library
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities
What is Ajax ?
AJAX is an abbreviation for Asynchronous JavaScript And XML, which is the act of updating sections of a webpage without reloading the entire page.
Now, Let’s see step by step for how to submit form without reloading page by using jQuery AJAX and you are going to love this next one…
Demo Video for to Submit Form Without Reloading Page by jQuery and AJAX :
Steps to Submit Form Without Reloading Page by jQuery and AJAX in HTML :
Here are the steps on how to submit form without reloading page by using jQuery and AJAX with Source Code.
Step 1 : Create HTML Form
First of all, let's make an HTML form with two fields: name and email.
<div align="center" class="container py-5 my-5 col-5">
<form id="registration_form" method="post" action="javascript:void(0)">
<h1>Subscribe Now !</h1>
<input type="text" name="name" placeholder="Name" />
<input type="email" name="email" placeholder="E-mail" required="required"
/>
<button type="submit" id="Send_btn" class="btn btn-purple">Submit</button>
<div id="messages"></div>
</form>
</div>
Step 2 : Adding CSS to HTML form
Next, Let's add some CSS to make the form more beautiful and attractive for the user.
#registration_form {
background: rgb(17, 2, 23);
padding: 30px;
color: rgb(90, 7, 122);
}
#registration_form:hover {
box-shadow: 1px 1px 2px black, 0 0 25px rgb(90, 7, 122), 0 0 5px darkblue;
}
.btn-purple {
border-width: 2px;
border-style: inset;
border-color: #5a077a;
color: white;
}
.btn-purple:hover {
color: white;
box-shadow: 1px 1px 2px black, 0 0 25px rgb(90, 7, 122), 0 0 5px #4f4cff;
}
Step 3 : Adding jQuery Script
Next, Let's add some jQuery Ajax which will help us to send form data to backend( php ) without reloading a webpage.
//SENDING DATA BY AJAX
$(document).ready(function () {
$("#Send_btn").click(function (e) {
e.preventDefault(); // It will Prevent Default action of the form
/* Storing email in the javascript variable for validation */
var email = $("input[name=email]").val();
if (email == "") {
$("#messages").html('<p style="color:red;">Email id Required! </p>');
setTimeout(function () {
$("#messages").html("");
}, 1000); // After 1 second / 1000 milliseconds the message will be disappear
} else {
/* Submit form data using ajax Starts Here*/
$.ajax({
url: "backend.php",
method: "post",
data: $("#registration_form").serialize(),
/* Displaying Loading Symbol during the request is processing */
beforeSend: function () {
$("#messages").html(
'<br><span class="spinner-border fast" style="width: 2rem; height: 2rem;color:green;" role="status"></span>'
);
},
success: function (Response) {
$("#messages").html(Response);
$("#registration_form")[0].reset(); // It will reset the form
setTimeout(function () {
$("#messages").html("");
}, 20000); // after 2 seconds the response will be disappear
}
});
/* Submit form data using ajax Ends Here*/
}
});
});
Step 4 : Adding PHP Script
Finally, php script will collect data and store it to mysql table.
<?php
$conn=mysqli_connect("localhost","root","","test");
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
/* Collecting form data in to php variables starts here */
$name =$_POST['name'];
$email =$_POST['email'];
/* Collecting form data in to php variables Ends here */
/* Checking the user is already subscribed starts here */
$query="select * from subscribers WHERE `email`='$email'";
$query_run=mysqli_query($conn,$query);
/* Checking the user is already subscribed ends here */
if(mysqli_num_rows($query_run)>0)
{
#this block code is executed if the user is already subscribed
echo ' <p style="color:red;"> Already Subscribed! Please try with another email id </p>';
}
else
{
#Storing user data in the table starts here
$query="insert into subscribers VALUES('$name','$email')";
$query_run=mysqli_query($conn,$query);
if($query_run)
{
echo ' <p style="color:green;">Thanks for Subscribing </p>';
}
else
{
echo ' Something Error! Please Contact Site Owner!! ';
}
#Storing user data in the table Ends here
}
}
?>Download Source Code for to Submit Form by jQuery and AJAX :
If you have any questions or suggestions, please feel free to leave a comment below.
