HTML 5 Progress bar

Question

Anyone ever code in a progress bar for a MArketo Landing page. The idea would be that the bar would increase after each field is completed until all fields are done and bar would be 100%?

This is what i have

<progress max="100" value="0" id="progress"></progress>

<script>
$("#payment-form input").keyup(function() {

// calculate progress

});

var numValid = 0;
$("#payment-form input[required]").each(function() {
if (this.validity.valid) {
    numValid++;
}
});

// "Cached" somewhere once
var progress = $("#progress"),
progressMessage = $("#progressMessage");

// Logic that runs after counting every time
if (numValid == 0) {
progress.attr("value", "0");
progressMessage.text("The form, it wants you.");
}
if (numValid == 1) {
progress.attr("value", "20");
progressMessage.text("There you go, great start!");
}
</script>

Where the form I'm trying to gather the info from is called progress

Answer 1

Try the html5 native progress bar (works only in modern browsers (basically, anything but IE))

<progressbar max='100' value='0' id='my-id'></progressbar>
<!-- later... -->
<script type='text/javascript'>
functions setBarValue(v){
    document.getElementById('my-id').value=""+v;
}
</script>

See http://www.w3schools.com/tags/tag_progress.asp for browser support. (I know about w3fools.com but w3schools is still good for reference)

If you want to target all browsers you're better off using jQuery UI (http://jqueryui.com). With jQuery UI you can use this code

<div id='my-id'></div>
<!-- later... -->
<script type='text/javascript'>
$(document).ready(function(){
    $("#my-id").progressbar();
});
function setBarValue(v){
    $("#my-id").progressbar({value:v});
}
</script>