jQuery, Percent Completed Meter (a jquery plugin to show what % of a form has been completed)

jQuery, Percent Completed Meter (a jquery plugin to show what % of a form has been completed)

/**
 * jQuery plugin: Percent Completed Meter
 * Created by Nick Hagianis
 * Date: 1/28/11
 *
 * You are free to use, modify, and redistribute any and all parts of this code as you see fit.
 * There is no warranty, and I'm not liable if it breaks or breaks any other code in your project.
 */

(function($){
    $.fn.percentComplete = function(selector, color, size){
        return this.each(function(){
            var fieldCount = $(selector).length;
            var completeCount = $(selector+'[value != ""][value != "select"]').length;
            var percentComplete = Math.round((completeCount / fieldCount) * 100);
            $(this).empty().append(percentComplete + "% Complete<br><div><div>&nbsp;</div></div>").children("div").css({"width": size, "border": "1px solid"+color}).children("div").css({"width": percentComplete+"%", "background-color":color});
        });
    };
})(jQuery);

--------------------------------------------------------------------------------
Example
--------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jQuery Percent Completion Meter</title>

<style type="text/css">
#container {position:relative; width:990px; margin:0 auto;}
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
(function($){
    $.fn.percentComplete = function(selector, color, size){
        return this.each(function(){
            var fieldCount = $(selector).length;
            var completeCount = $(selector+'[value != ""][value != "select"]').length;
            var percentComplete = Math.round((completeCount / fieldCount) * 100);
            $(this).empty().append(percentComplete + "% Complete<br><div><div> </div></div>").children("div").css({"width": size, "border": "1px solid"+color}).children("div").css({"width": percentComplete+"%", "background-color":color});
        });
    };
})(jQuery);

$("document").ready(function(){
    $("#completion_meter").percentComplete(".required", "#000000", "200px");
    $(":input").blur(function(){
        $("#completion_meter").percentComplete(".required", "#000000", "200px");
    });
});
</script>
</head>
<body>

<div id="container">

    <br><br>
    <div id="completion_meter"></div>
    <br><br>

    <form>
        <div>First Name: <input class="required" id="first_name" name="first_name" type="text" value=""/></div>
        <div>Last Name: <input class="required" id="last_name" name="first_name" type="text" value=""/></div>
        <div>Email: <input class="required" id="email" name="email" type="text" value="" /></div>
        <div>Birthday: <input class="required" id="Birthday" name="birthday" type="text" value="" /></div>
        <div>Address: <input class="required" id="address" name="address" type="text" value="" /></div>
        <div>Do you like Tech Crunch: <select class="required" id="tech_crunch"><option value="select">select</option><option value="yes">yes</option><option value="no">no</option></select></div>
        <div>Description:<br><textarea rows="6" cols="40" class="required" name="description" id="description"></textarea></div>
        <input type="submit" name="submit" id="submit" value="submit" />
    </form>

</div>

</body>
</html>

I’m sure something like this already exists, but I couldn’t find a good, simple one.

This is a jquery plugin that produces a completion meter to show what percentage of a form has been complete by the user. You basically just have to link the script, put a

<

div> tag in your html and then call the ‘percentComplete’ function on that div tag whenever you want to calculate and display what percentage of the form has been completed. In the above example, the calculation is being made when the page first loads and then every time the user moves off of a field.

The function takes 3 arguments. The first argument is a jquery selector to determine which form fields to calculate. In the example above it’s calculating the % for all input fields, but you might want to change this to only calculate for required fields in which case you can pass something like “.required”. The second argument is the hex color that you want the meter and it’s border to be set as, and the third argument is the width of the meter.

This is the first jQuery plugin I’ve ever written and the first piece of code I’m releasing to the open source community, so comments and suggestions are very much welcome.

Advertisements
By Rz Rasel Posted in jQuery

One comment on “jQuery, Percent Completed Meter (a jquery plugin to show what % of a form has been completed)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s