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.
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%)
}
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 –
- jQuery Form Submit by Id, Class, Name and Tag
- jQuery Dialog Form
3 Replies to “Displaying Progress Bar On Form Submission Using jQuery”
There is some serious SQL injection hazard in the PHP code. Use mysql_real_escape_string() on the values first.
$query=mysql_query(sprintf(
“insert into table_name (column1, column2, column3, column4) values (‘%s’,’%s’,’%s’,’%s’)”,
mysql_real_escape_string($name),
mysql_real_escape_string($email),
mysql_real_escape_string($mobile),
mysql_real_escape_string($address)
));
Or use prepared statements.
using this function(status) {
$(“#loading”).hide(); // To Hide progress bar
alert(status); actually take the same result into the alert box. How can send have the result “Form load success” and display page to be different. What I am interested in is that after the $(“#loading”).hide(); I want to immediately be redirected to another page. Can you help me?
hi,.