Progress Indicator for Signup form

Question

I'm having trouble getting started on this problem as I'm primarily focusing developing the home page.

The desire is to have a progress indicator of sorts for the signup form that obviously shows progress as the form nears completion BUT it is a single page form with only 6 fields for input.

This is the library used for the indicator and I'm told to use the jQuery library. Here is that js for the indicator-

<script>
  var front_index_gage = new JustGage({
    id: "front_gage", 
    value: 3, 
    min: 0,
    max: 100,
    title: "Signup Progress",
    startAnimationType: "bounce",
    refreshAnimationType: "bounce",
    refreshAnimationTime: 1500,
    startAnimationTime: 1500

  }); 
</script>

Obviously, I need to write something dynamic for the value field, but would I use something like .keypress() or .focus() for the event call?

What should my implementation approach be? Thanks for your attention and for taking a look.

===========UPDATED=========

I had changing of the background-color of the progress indicator div working with blur and I think it is the solution. I've hit snag manipulating the actual progress bar based on their api, I should just be able to call refresh on the progress indicator and update the value right? in this case from 3 to 16

The coffee-

jQuery ->
 $("#user_first_name").blur (event) ->
  $("#front_gage").refresh "value", 16

Not yet with the conditional (if nothing entered) but this simple hello world implementation should work I believe, but it's not.

6 input form

maybe blur event then it update when you have finished to fill a field — Jonathan de M., Dec 08 '12 at 06:59
is there not an apparent way to guard against (in js) if the user did not actually enter text into the field? i.e. clicks out of the first field and the event is sent to the progress indicator and it indicates progress (without text) — computer_smile, Dec 08 '12 at 07:03

Progress Indicator for Signup form

0 Answers0