[SOLVED] Making a progress bar(image) visible onClick?

[Solarpitch]

Hey Guys,

 

I am using a "fake" progress bar for my form. Its just an animated gif. When the user hits submit I want to make the progress bar visible until the form has been submitted. Just wondering how I could achieve this? Something like...?

 

<input type="submit" name="Submit" value="Submit" onClick="return progress_bar(this);">

 

When submit is click I want to display "<img src="designs/pb_gap.gif" width="200" height="20">" just under it. When the for is submitted I want to hide the image again!

 

 

 

 

[micah1701]

do something like this.  the progress bar is already there but hidden by CSS.  then on submit, the javascript function hides the submit button and replaces it by un-hiding the progress image:

 

<script type="javascript">
function onSubmit(){
document.getElementById('submitButton').style.display = "none";
document.getElementById('progressBar').style.display = "block";
}
</script>

<form action="..." onSubmit="return onSubmit()">
  .....
<div id="submitButton">
<input type="button" value="submit">
</div>
<div id="progressBar" style="display: hidden">
<img src="yourProgressBar.gif">
</div>

</form>

[Solarpitch]

Perfect . . thank you!