Create jQuery Form with Progress bar and Input Limiter

Author: Zeeshan Rasool | Last updated on July 1st, 2010

JQuery, PHP, Web Development

[ad#co-4]

Simple jQuery progress bar on form to show characters length with input limiter functionality. Demo available with downloads.

CSS for your form.

body{ margin:30px auto; width:75%; font: normal normal 12px/1.8em "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", sans-serif; }
 #heading
{
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:56px;
 color:#CC0000;
 float:left;}
 a{
 font-size:24px}
#description
{
	width:297px; height:100px;
	font-family:Arial, Helvetica, sans-serif;

	color:#000000;
	font-size:15px;
}
#filling_tube_input
{
	background-color:red;
	width:0px;
	height:6px;
}
#filling_tube_subject
{
	background-color:red;
	width:0px;
	height:6px;
}
#filling_tube
{
	background-color:red;
	width:0px;
	height:6px;
}
.label{
       width:100px;
}
input{outline: none; margin-bottom:1px;/* Get rid of the 'glow' effect in WebKit, optional */}
#container
{
height:6px; background-color:#FFFFFF; width:299px; border:solid 1px #000; margin-right:3px;
}
#container_input
{
height:6px; background-color:#FFFFFF; width:201px; border:solid 1px #999; margin-right:3px;
}
#container_subject
{
height:6px; background-color:#FFFFFF; width:201px; border:solid 1px #000; margin-right:3px;
}

body{ margin:30px auto; width:75%; font: normal normal 12px/1.8em "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", sans-serif; }

#heading

{

font-family:Georgia, "Times New Roman", Times, serif;

font-size:56px;

color:#CC0000;

float:left;}

font-size:24px}

#description

{

width:297px; height:100px;

font-family:Arial, Helvetica, sans-serif;

color:#000000;

font-size:15px;

}

#filling_tube_input

{

background-color:red;

width:0px;

height:6px;

}

#filling_tube_subject

{

background-color:red;

width:0px;

height:6px;

}

#filling_tube

{

background-color:red;

width:0px;

height:6px;

}

.label{

width:100px;

}

input{outline: none; margin-bottom:1px;/* Get rid of the 'glow' effect in WebKit, optional */}

#container

{

height:6px; background-color:#FFFFFF; width:299px; border:solid 1px #000; margin-right:3px;

}

#container_input

{

height:6px; background-color:#FFFFFF; width:201px; border:solid 1px #999; margin-right:3px;

}

#container_subject

{

height:6px; background-color:#FFFFFF; width:201px; border:solid 1px #000; margin-right:3px;

}

[ad#co-3]
jQuery file with input limiter plugin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>

Downlad Input Limiter Plugin

javascript to call input limiter function.

$(function() {
	$('#description').inputlimiter({limit: 200});
    $('#name').inputlimiter({limit: 35});
    $('#subject').inputlimiter({limit: 100});
});

$(function() {

$('#description').inputlimiter({limit: 200});

$('#name').inputlimiter({limit: 35});

$('#subject').inputlimiter({limit: 100});

});

Code to perform progress bar action

$(document).ready(function()
{
	$("#description").keyup(function()
	{
		var box=$(this).val();
		var fill = box.length;
		var main = box.length *100;
		if(fill &lt;= 200)
		{
			fill = fill/2;
			var round_val = Math.round(fill);
			$('#filling_tube').animate(
			{
			"width": fill+'%',
			}, 1);
		}

	});
    $("#name").keyup(function()
	{
		var box=$(this).val();
		var fill2 = box.length;
		var main = box.length *100;
        if(fill2 &lt;= 40)
		{
            fill2 = fill2*3;
            fill2 = fill2-5;
            $('#filling_tube_input').animate(
			{
			"width": fill2+'%',
			}, 1);
		}

  	});
   $("#subject").keyup(function()
	{
		var box=$(this).val();
		var fill3 = box.length;
		var main = box.length *100;
        if(fill3 &lt;= 100)
		{
			$('#filling_tube_subject').animate(
			{
			"width": fill3+'%',
			}, 1);
		}

  	});

});

$(document).ready(function()

{

$("#description").keyup(function()

{

var box=$(this).val();

var fill = box.length;

var main = box.length *100;

if(fill <= 200)

{

fill = fill/2;

var round_val = Math.round(fill);

$('#filling_tube').animate(

{

"width": fill+'%',

}, 1);

}

});

$("#name").keyup(function()

{

var box=$(this).val();

var fill2 = box.length;

var main = box.length *100;

if(fill2 <= 40)

{

fill2 = fill2*3;

fill2 = fill2-5;

$('#filling_tube_input').animate(

{

"width": fill2+'%',

}, 1);

}

});

$("#subject").keyup(function()

{

var box=$(this).val();

var fill3 = box.length;

var main = box.length *100;

if(fill3 <= 100)

{

$('#filling_tube_subject').animate(

{

"width": fill3+'%',

}, 1);

}

});

HTML

<div class="label">Name</div>
<input id="name" name="name" size="30" />
<div class="label">Email</div>
<input id="subject" name="subject" size="30" />
<div class="label">Description</div>
<textarea id="description"></textarea>

<div class="label">Email</div>

<div class="label">Description</div>

[ad#co-2]

Recommended WordPress Themes Store

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com