Progress Bar: Show Progress Bar On Form Submission Using JQuery / Show progress bar on form submit in PHP / Progress bar on button click in jQuery

Hello Friends,

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

This same code would be applicable with some small modification for a similar problem like How do I show progress bar upload? jQuery file upload progress bar percentage, File upload progress bar with jQuery and PHP, the Progress bar on button click in jQuery.

Within this blog, we are going to keep our focus on How do I show progress bar upload? How do I show a progress bar in HTML? How show the progress bar in JQuery AJAX? Is it possible to submit a form without a submit button?

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.

You would have also seen the file upload progress bar with Jquery and PHP. you can also access the progress bar in PHP source code in this extensive blog tutorial.

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 a 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 the 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? / Show progress bar on form submit in PHP / How do I show a progress bar in HTML?

This is a very simple process to make a 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 the 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 the 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:

[code 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>
[/code]


Progressbar.php:

[code 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
?>
[/code]


progress.js:

[code 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);
});
});
});
[/code]


progress.css:

[code 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%)
}
[/code]


Image:

here you will also need to include one image in the image folder as shown in the 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


Conclusion:

So, in this blog post, we have learned to develop a file upload progress bar with jQuery and PHP. Using this above code we can easily show a progress bar on form submits using jquery. You also get the progress bar in PHP source code which can be tried and tested at your end. You can also customize this code as per your requirement and can get amazing effects using CSS updates.

So, we have covered lots of sections like

How do I show progress bar upload? How do I show a progress bar in HTML? How show the progress bar in JQuery AJAX? Is it possible to submit a form without a submit button?  Show progress bar on form submit in PHP, Form submit progress bar jquery, Bootstrap progress bar on form submit, jQuery progress bar, Show spinner on form submit PHP, a Progress bar on button click in jQuery.


In case of any queries, you can write to 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!

Anurag

I am a blogger by passion, a software engineer by profession, a singer by consideration and rest of things that I do is for my destination.