Creating a dynamically updated progress bar with Rails/Jquery?

This is my first "general" SO question - I'm not looking for anyone to write a single line of code for me, I just need some advice

I'm looking for a method to implement a progress bar/thermometer (ideally in jquery) that updates dynamically as users enter data into a form in my Rails app. I'm not concerned with the value of the fields of the form, just whether they are filled out or not. Individual fields will have hard coded weights (i.e. filling out your name gives you 1 point, email 10 points, etc) that increment the count/percentage of status bar in a very ajax-y, asynchronous way. I don't want to have to post or refresh to see the status of the progress bar.

I have a feeling I'm going to have to use some premade jquery library like one of the following:

1. Jquery ProgressBar
2. ProgressBarDemo

Here's the kicker: I can't even fathom to to get these progres开发者_如何转开发s bars to accept data from user input in my Rails FormHelper forms. I've looked at all the API docs and class methods and have no idea where to start!

How about it SO? Can you point this n00b in the right direction? any good examples I could look at?

Thanks in advance!

~Dan

I think you could just do the entire thing via jQuery. This is how I would imagine it working - i.e. not writing the code but more helping you think this one through.

Firstly, you have several inputs, let's just say there are 5 to make it easy and they are all of type text.

<input type="text" name="first" value="" />
<input type="text" name="second" value="" />
<input type="text" name="third" value="" />
<input type="text" name="fourth" value="" />
<input type="text" name="fifth" value="" />

Then let's assume that also means that each one is worth 20% and that your progress bar starts at 0 when you enter the page.

HTML:

<div id="progressbar"></div>

jQuery:

$( "#progressbar" ).progressbar({
    value: 0
});

Then the simple thing to do would be to update that value when each element is changed.

First look for changes:

$('input').change(function(){
    // Code goes here to update
});

Them really the next thing you need to remember is that value is both a getter and a setter. So simply get the value, assign it to a variable, then update the value, which would probably look something like this.

currentValue = parseInt($("#progressbar").progressbar('value')) + 20;
$("#progressbar").progressbar('value',currentValue);

Again, I haven't tested this, but it's my best guess as to how to very easily do it.

Additionally to what Mitch said. I'd suggest to use the focusout() event that jquery provides. Then you can check each input box for its content once the user leaves it.