This tutorial demonstrate you to add progress bar functionality on form submission i.e. when you click the submit button it will show a loading image and until the post information won’t get submitted into database.

Here, we have created an HTML form with four fields and a submit button. User fills the form and as he/she clicks on submit button a progress bar will display for a moment.



In our example we send our form data to a PHP page where, we fetched values from url and insert them into a My-SQL database. Untill this PHP page returns some value back to HTML page, Progress bar is shown to user using jQuery.

Just follow our codes or download it to use.

display progress bar on form submission

 

 

HTML File: progress.html

Given below an html code to create simple form.

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

 

jQuery File: processing.js

This jquery code executes to transfer Form data to PHP page without page refreshing.

$(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();
// Transfering form information to different page without page refresh
$.post("processing.php", {
name: name,
email: email,
mobile: mobile,
address: address
}, function(status) {
$("#loading").hide(); // To Hide progress bar
alert(status);
});
});
});

 

PHP Script: processing.php

Below script executes on html form submission.

<?php
//Initializing connection variable with server_name, user_name, password.
$con = mysql_connect("localhost", "username", "password");
//Selecting Database
$db = mysql_select_db("database_name", $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 fill all fields....." ;
} else{
// My-SQL query for inerting PHP variable values in table of selected database.
$query=mysql_query("insert into table_name (column1, column2, column3, column4) values ('$name','$email','$mobile','$address')");
if($query){
echo "Form Submitted Successfully....";
}else{
echo "Error...!!" ;
}
}
mysql_close($con); // Closing Connecion with server
?>

 

CSS File:  processing.css

Styling, HTML elements.

#container{
width:960px;
height:610px;
margin:50px auto
}
#fugo{
float:right
}
form{
width:345px;
padding:0 50px 20px;
background:linear-gradient(#FFF,#CEBA53);
border:1px solid #ccc;
box-shadow:0 0 5px;
font-family:'Marcellus',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%)
}

Pabbly Form Builder


Conclusion:

Thus, In this way you can add different .gif images as a progress bar or wheel in your form. To learn more, keep reading our blogs.

Check out these below given blogs for more details –