How to use Jquery UI progress bar

Have you ever wanted to show the users their progress when filling up a form? There are actually lots of solutions to your problem. But what we will be discussing here today is how to do it using jquery ui.

Here’s a sample output. It may not seem like it, but the gray color in the top is not a fieldset legend. It’s the progress bar. Since I’ve already filled up all the fields, it shows 100% of the progress bar is also filled up.

image

If that’s not believable, here’s what it looks like when I try to remove the values from two of the text fields:

image

 

Requirements

  • Jquery core
  • Jquery UI

 

 

Procedure

Like I always say, do first the housekeeping before trying to do anything else:

<link rel="stylesheet" href="jquicss.css"> //jquery ui css
<script src="jq.js"></script>  //jquery core
<script src="JQUI.js"></script> //jquery ui javascript file

Then do a little bit of styling if you want. I only did this to make the form smaller, so that it would fit nicely on my screenshot.

<style>
    #container{
        width:300px;
    }
</style>

Next, write the code for the html that we styled above. The following html that were going to write will all go inside this container.

<div id="container"></div>

Next is the progress bar. The default styling for this one is already in the jquery ui css file so there’s really no need to include it in your css unless you want to customize the default styling.

<div id="progressbar"></div>

Next, the fieldset that’s going to contain all the text fields which we will validate later on if it has contains anything at all.

<fieldset id="fs_progress">
	<p>
	    <label for="name">Name:</label>
	    <input type="text" name="name" id="name">
	</p>
	<p>
	    <label for="course">Course:</label>
	    <input type="text" name="course" id="course">
	</p>
	<p>
	    <label for="year">Year:</label>
	    <input type="text" name="year">
	</p>
	<p>
	    <label for="anime">Anime:</label>
     	    <input type="text" name="anime" id="anime">
	</p>
	<p>
	    <label for="programming language">Language:</label>
	    <input type="text" name="year">
         </p>
</fieldset>

Proceed to the head section of your page. And do the housekeeping for jquery:

$(function(){
   //code goes here
});

After doing the housekeeping. Initialize the progress bar. The code below will just create a progress bar inside the div with an id of progress bar.

$('#progressbar').progressbar();

Declare the global variables:

var progress = 0;

var empty_count = 0;
var filled_up = 0;
var text_fields = 5;

Here’s a summary of what each variables store:

  • progress – basis of the default progress which will be indicated in the progress bar. This is where we will add up values to make sure that the actual progress of the user matches with the one in the progress bar.
  • empty_count = stores the number of fields that is empty.
  • filled_up – stores how many fields has been filled up.
  • text_fields = total number of text fields inside the form.

 

The thrill all happens when the blur() event for all the text fields gets executed:

$('input[type=text]').blur(function(){
   //thrill
});

Next, loop through all the text fields. And add up 1 to the empty_count variable everytime a field doesn’t contain anything at all after being trimmed of whitespaces.

$('input[type=text]').each(function(index){
	var this_input = $.trim($(this).val());
		if(this_input == ''){
		    empty_count++;
		}		
});

Finally, we do the calculations. The code is pretty much self explanatory, except for the third line I guess. So what were doing in the third line is that we are assigning a value for the progress bar. It gets the value stored in the progress variable. Fourth line just resets the value of empty count. You’ll find out how is that necessary by removing that code and see the output. This is just some sort of a housekeeping to ensure that the empty_count is always fresh on every blur(). Otherwise we will be getting bigger numbers as we play around with the program since the empty_count is declared outside the blur() event.

filled_up = text_fields - empty_count;	
progress = filled_up * 20;
$('#progressbar').progressbar("option", "value", progress);
empty_count = 0;

 

 

Conclusion

Okay, so that’s it for this midnight tutorial. You’ve learned how to use the jquery ui progress bar to indicate user progress in filling up an html form.

One thought on “How to use Jquery UI progress bar

  1. Do you might have a spam concern on this site; I also am a blogger, and I was questioning your scenario; we now have created some nice strategies and we are searching to exchange solutions with other people, be sure to fire me an e-mail if interested.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s