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

Author of 99Points
Zeeshan Rasool is an experienced PHP Web Developer and founder at 99Points. Expert in Codeigniter (MVC), WordPress, JSON, jQuery & HTML5

Friends

Create a Website

Create jQuery Form with Progress bar and Input Limiter

Downlad Input Limiter Plugin

Recommended WordPress Themes Store

Friends

Categories

Popular post

Create jQuery Form with Progress bar and Input Limiter

Downlad Input Limiter Plugin

Few More Brilliant Posts !

Recommended WordPress Themes Store

Friends

Categories

Popular post