Javascript and Onclick problem

[wickedneat]

So I have this form:

<form method="post" action="/" enctype="multipart/form-data">
<input type="submit" name='post_comment' class="btn btn-primary" value="Submit Data" onclick="this.disabled=true; this.value='Submitting...'; this.form.submit();" />
</form>

On the trigger I want to run the following code:

<div id="progbar" align="right" style="background-color:#3F5872; padding:5px; height:100%; color:#fff;">Progress <span id="count">0</span>%</div>
<script type = "text/javascript">
var num = 0;
function countToHundred() {
if (num > 100) {
window.clearTimeout ("tim");
}
else {
document.getElementById("count").innerHTML = num;
document.getElementById("progbar").style.width = num;														
num ++;
var tim = window.setTimeout("countToHundred()", 250);  // centiseconds timer
}
}
countToHundred();
</script>

I’m having to problems.

1. How can I make it so this code only runs once the button is submitted.
2. The style.width option in the javascript does not seem to be updating the width of the “progbar”. The “progbar” only stays at 0%.

What should I do to resolve these two problems?

[felgall]

Don’t use onclick on a submit button. You should be triggering the submit event on the form instead of the click event on the submit button in order to run processing before the form is submitted.

Note also that the form will be submitted automatically when the code is run so there is no reason to submit it from the JavaScript.