Hello Friends, In this blog post(Progress Bar: How to Show Progress Bar On Form Submission Using JQuery ), I will let you know, how to display the progress bar on Form submission using JQuery, PHP, HTML, and CSS.
This same code would be applicable with some small modifications 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|How to Show Progress Bar On Form Submission Using JQuery|
Within this blog(How to Show Progress Bar On Form Submission Using JQuery), we are going to keep our focus on How to show the 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, etc.
You would have also seen the file upload progress bar with JQuery and PHP. you can also access the progress bar in the 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.
An operation like data insertion and data extraction from the database might take a little bit of 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: How to Show Progress Bar On Form Submission Using JQuery
Netbeans.
Xampp Server, though you can also use the wamp server
Note: You can use any platform that supports all the codes used to make this progress Bar.
What is the process to make this Progress Bar? / Show progress bar on form submits in PHP / How do I show a progress bar in HTML?/ How to Show Progress Bar On Form Submission Using JQuery?
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 named ‘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.
2. Make the files as shown in the below image.
Now copy the below codes one by one and paste them into 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 them 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 the table of the 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 the progress bar 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 the progress bar
$("#loading").show();
var name = $("#name").val();
var email = $("#email").val();
var mobile = $("#mobile").val();
var address = $("#address").val();
// Here we are transferring the form information without refreshing 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 place all code in 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 fill in all the information in the form and then click on the submit button, you will see a
progress bar just above the submit button. This progress bar will disappear when your form is submitted successfully.
You can also go through a few related blog links:
User Registration Form Using PHP & HTML…
PHP Email Verification Script For Downloading E-Book…
Login Form: Simple PHP Login Form With Session…
How to Show Progress Bar On Form Submission Using JQuery…
How to install XAMPP Server on your local computer…
you can also go through a few more amazing blog links below related to javascript/jQuery:
Difference Between jQuery and Angular JS In Hindi… Java Script vs Node JS In Hindi… Google Form Captcha Setup Using PHP and Jquery… How to Upload Images with PHP and Jquery Using Form… An Auto Submit Form Using JavaScript… How to limit login attempts in JavaScript… Dynamically Add Remove Form Fields Using JavaScript… Contact Us Popup Form Using JavaScript… How to make a sliding contact form using JavaScript… Contact Form Using JQuery… Progress Bar: How to Show Progress Bar On Form Submission Using JQuery… Difference Between JQuery and JavaScript In Hindi…
Conclusion:
So, in this blog post(How to Show Progress Bar On Form Submission Using JQuery), 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 the PHP source code which can be tried and tested at your end. You can also customize this code as per your requirements 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|How to Show Progress Bar On Form Submission Using JQuery|
In case of any queries, you can write to us at a5theorys@gmail.com we will get back to you ASAP|How to Show Progress Bar On Form Submission Using JQuery|
Hope! you would have enjoyed this post about Show Progress Bar On Form Submission Using JQuery|How to Show Progress Bar On Form Submission Using JQuery|
Please feel free to give your important feedback in the comment section below|How to Show Progress Bar On Form Submission Using JQuery|
Have a great time! Sayonara!
