progressbar for form

As some will know on here, we are heavily into forms at the moment. So got me thinking, and I do know of various progress bars out there.

Such as: Wits

and jquery.progressbar itself.

What I havent seen as yet, is ...

Lets say we have a form, with 5 input f开发者_开发知识库ields. Any form will do. Can we attach a score value for each input field, say 20% but that when user clicks into next field, the progreebar is animated, or fills up ( so progresses to 20% etc. )

This isnt quite how we want to do it, but is near enough.

Anyhoo, I am not after someone to write this, just to explain. How we attach a variable ( value ) to an input element, which then gets parsed to the progressbar.

Thats the bit I am stuck on, most of the scripts online are based on SUBMIT. And paginate a form into 5 elements, each element worth x%

Anyways Cheers.

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>