Build a website fast with GoDaddy.com! - 125x125
Apr
24

Create jQuery Form with Progress bar and Input Limiter

Author ZeeShaN    Category JQuery, PHP, Web Development     Tags

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;
}


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>

Downlad Input Limiter Plugin

javascript to call input limiter function.

$(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);
		}
 
  	});
 
});

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>

Add To Facebook Stumble This Digg This Add To Del.icio.us Add To Reddit Add To Yahoo Add To Twitter


Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.

7 to “Create jQuery Form with Progress bar and Input Limiter”

Post comment



Enter your Email:

Click Here for Popular

Who Am I

Zeeshan Rasool

Software Engineer - PHP
Lahore - Pakistan
Skype: zeeshan-rasool
gTalk: zishan.rasool85

Categories

Archives

Tags

99points adobe AJAX ajax pagination ajax rating ajax tutorial captcha Codeigniter codeigniter 2.0 codeigniter recaptcha CSS css tutorials curl dreamweaver cs5 Facebook Facebook. PHP. JQuery facebox farmville ffmpeg flv google api hacking image gallery Joomla JQuery jQuery Sliding Jquery tutorial mafia war Mootools MySQL Payment PHP php curl Poll System recaptcha RSS Feed SEO simplepie socail networking ssl Tutorials Twitter Web XSS youtube

Comments