progress-bar

Progress Bar: Show Progress Bar On Form Submission Using JQuery.

Hello Friends,

In this blog post, I will let you know, how to display progress bar on Form submission using Jquery, PHP, HTML, CSS?

What is the use of this progress bar?

You would have seen this progress bar on several sites while submitting the form, making payments and etc.

Simply progress bar is used to keep the user engaged with the web page or form until their process gets completed.

The operation like data insertion and data extraction from the database might take little bit time to execute as this is the process of server interaction,

So in a case, if we don’t have any progress bar, a user might leave the web page before the execution of the process.

So it is very important to have a progress bar with the submission of the request to assure the user that their request has been completed.

This becomes very important when it comes to the payment forms where the user can not switch the page before the process gets executed.

so we should always try to use progress bar in case of sensitive information from or payment form.

Software Used:

Netbeans.
Xampp Server, though you can also use wamp server

Note: You can use any platform which supports all the codes used to make this progress Bar.

What is the process to make this Progress Bar?

This is a very simple process to make progress bar, you just need to follow the step by step procedure given below.

Here We are using the same name as we have used in making the project, you can change the name of project  and files but in this case, remember to make changes in the code files accordingly where ever need to change the name.

1. Make a PHP project name ‘test’

And make a database in your Xampp server named as a test. Make a table Employee under test database with the given below fields in the image.

database

2. Make the files as shown in the below image.

progressbarimg2

Now copy the below code one by one and paste them in the respective file or folder inside your project.


progressbar.html:

<!DOCTYPE html>
<html>
<head>
<title>Displaying Progress Bar on Form Submission</title>
<!-- Include Google font here -->
<link href="https://fonts.googleapis.com/css?family=Spectral" rel="stylesheet"><!-- Include CSS file here -->
<link href="progressbar.css" rel="stylesheet" type="text/css"/>
<!-- Include jQuery file here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="progressbar.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<form id="form" action="" method="post">
<h1>Displaying Progress Bar on Form Submission</h1>
<label>Employee Name :</label>
<input type="text" name="dname" id="name"/>
<label>Employee Email :</label>
<input type="text" name="demail" id="email"/>
<label>Employee Mobile No. :</label>
<input type="text" name="dmobile" id="mobile"/>
<label>Employee Address :</label><br />
<input type="text" name="daddress" id="address"/>
<img id="loading" src="images/5.gif" /> <!-- Loading Image -->
<input type="button" id="submit" name="submit" value="Submit" />
</form>
</div>
</body>
</html>

Progressbar.php:

<?php
//Initializing connection variable with server_name, user_name, password.
$con = mysql_connect("localhost", "root", "");
//Selecting Database
$db = mysql_select_db("test", $con);
//Fetching values from url and storing it in PHP variables.
$name=$_POST['name'];
$email=$_POST['email'];
$mobile=$_POST['mobile'];
$address=$_POST['address'];
if(($_POST['name']=='')
||($_POST['email']=='')
||($_POST['mobile']=='')
||($_POST['address']==''))
{
echo "Please Enter all the Fields" ;
} else{
// My-SQL query for inerting PHP variable values in table of selected database.
$query=mysql_query("insert into employee (name, email, mobile, address) values ('$name','$email','$mobile','$address')");
if($query){

sleep ( 5 ); // we use this function here to show you the effect of progressbar as our form data is very small.
echo "Your Form has been submitted successfully";
}else{
echo "Error...!!" ;
}
}
mysql_close($con); // Closing Connecion with server
?>

progress.js:

$(document).ready(function() {
$("#submit").click(function() {
// To Display progress bar
$("#loading").show();
var name = $("#name").val();
var email = $("#email").val();
var mobile = $("#mobile").val();
var address = $("#address").val();
// Here we are transfering the form information without refresshing the page.
$.post("progressbar.php", {
name: name,
email: email,
mobile: mobile,
address: address
}, function(status) {
$("#loading").hide(); // To Hide progress bar
alert(status);
});
});
});

progress.css:

#container{
width:960px;
height:610px;
margin:50px auto
}

form{
width:345px;
padding:0 50px 20px;
background: linear-gradient(#b59999,#9e9c8e);
border:1px solid #ccc;
box-shadow:0 0 5px;
font-family: 'Spectral', serif;
float:left;
margin-top:10px
}
h1{
text-align:center;
text-shadow:1px 5px 22px gray
}
hr{
border:0;
border-bottom:1.5px solid #ccc;
margin-top:-10px;
margin-bottom:30px
}
label{
font-size:17px
}
#loading{
display:none;
margin-left:145px
}
input{
width:94%;
padding:10px;
margin:6px 0 20px;
border:none;
box-shadow:0 0 5px
}
input#submit{
width:100%;
margin-top:20px;
font-size:18px;
background:linear-gradient(#22abe9 5%,#36caf0 100%);
border:1px solid #0F799E;
color:#fff;
font-weight:700;
cursor:pointer;
text-shadow:0 1px 0 #13506D
}
input#submit:hover{
background:linear-gradient(#36caf0 5%,#22abe9 100%)
}

Image:

here you will also need to include one image in the image folder as shown in above file hierarchy.
You just download one gif progress bar image of size 31×31 and keep it in the image folder inside your project.


So once you will place all code at the place then you are almost ready to run your project.

Just run the progress.html file and you will get the form shown below in the image in the browser.

Here when you will fill all the information in the form and then will click on the submit button, you will see a

progress bar just above the submit button. This progress bar will disappear when your form will be submitted successfully.

progressbarimg1


In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post of making progress bar using jquery.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!