Create jQuery Form with Progress bar and Input Limiter
[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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
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; } |
[ad#co-3]
jQuery file with input limiter plugin.
|
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.
|
1 2 3 4 5 |
$(function() { $('#description').inputlimiter({limit: 200}); $('#name').inputlimiter({limit: 35}); $('#subject').inputlimiter({limit: 100}); }); |
Code to perform progress bar action
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
$(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
|
1 2 3 4 5 6 |
<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> |
[ad#co-2]
Recommended WordPress Themes Store
