Create jQuery Form with Progress bar and Input Limiter
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 <= 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>
Who I Am

Zeeshan Rasool
Software Engineer - PHP
Lahore - Pakistan
zeeshan(@)99points.info
Skype: zeeshan-rasool
gTalk: zishan.rasool85
Categories
- AJAX (37)
- Codeigniter (16)
- CSS (16)
- Facebook (11)
- Joomla (1)
- JQuery (53)
- Miscellaneous (4)
- Mootools (1)
- MySQL (6)
- PHP (60)
- SEO (2)
- Technology (6)
- Tutorials (15)
- Twitter (2)
- Web Design (23)
- Web Development (57)
- WordPress (2)
Tags
99points
adobe
AJAX
ajax pagination
ajax rating
ajax tutorial
ajax voting system
captcha
Codeigniter
codeigniter 2.0
codeigniter recaptcha
CSS
css tutorials
dreamweaver cs5
Facebook
facebox
farmville
ffmpeg
flv
google api
hacking
Joomla
JQuery
JQuery Gallery
JQuery menus
Jquery tutorial
mafia war
Mootools
MySQL
pagination
Payment
PHP
php curl
recaptcha
RSS Feed
SEO
simplepie
socail networking
ssl
Tutorials
Twitter
wall script
Web
XSS
youtube
Comments
- ZeeShaN on Facebook Wall Script Clone with JQuery and PHP: Personal Project BETA Version 2.0
- 20 + Fresh jQuery Image Gallery/Slider Plugins and Tutorials Worth a Look | free on JQuery Based Flipped Image Gallery with Bounce Effects
- 20 + Fresh jQuery Image Gallery/Slider Plugins and Tutorials Worth a Look | free on Fresh JQuery Image Gallery with Captions and Auto Play/Pause Rotation
- 25 Cool and Helpful jQuery Plugins/Tutorials For Your Next Project | free on jQuery Tutorial: Create jQuery and CSS based Awesome navigation.
- 25 Cool and Helpful jQuery Plugins/Tutorials For Your Next Project | free on Ajax Tutorial: How to Create Ajax Search Using PHP jQuery and MYSQL
ZeeShaN







This is a test
[...] http://www.99points.info/2010/04/create-jquery-form-with-progress-bar-and-input-limiter/ [...]
[...] http://www.99points.info/2010/04/create-jquery-form-with-progress-bar-and-input-limiter/ [...]
[...] http://www.99points.info/2010/04/create-jquery-form-with-progress-bar-and-input-limiter/ [...]
Very useful
Thanks for sharing
[...] Create jQuery Form with Progress bar and Input Limiter [...]
amazing work, input limiter is really useful
Social comments and analytics for this post…
This post was mentioned on Twitter by 99_Points: Create jQuery Form with Progress bar and Input Limiter http://dlvr.it/cG8D...