Progressbar for the form

Question

As some of us know, at the moment we are getting very strong in forms. So I thought, and I know the various progress bars there.

For example: Wits

and jquery.progressbar.

What I have not seen yet is ...

Suppose we have a form with 5 input fields. Any form will be completed. Can we attach a rating value for each input field, say, 20%, but when the user clicks on the next field, the progreebar is animated or filled (this progresses to 20%, etc.).

This is not quite the way we want to do this, but close enough.

Anyhoo, I don't want anyone to write this, just to explain. How do we attach a variable (value) to an input element, which is then analyzed in the progress panel.

This is the bit that I'm stuck on; most scripts on the network are based on SUBMIT. And paginate a 5 element form, each element costs x%

Cheers anyway.

Answer 1

Something like this you mean?

<script type="text/javascript">
function updateProgress(element) {
    var weight = element.attributes.weight;
    //some maths to shift the bar along by 25%
}
</script>

<input type="text" name="field1" id="field1" weight="25" onBlur="updateProgress(this);"/>
<div id="progressBar></div>