[SOLVED] onClick -- disable submit / image replace

[tommyboy123x]

I really know nothing about javascript besides the basic basics, so this should be pretty easy...

 

i have an upload form (php) which the user clicks the button, it disables, and a little animated gif "progress bar" appears to entertaint he user for a few seconds.

 

the problem is, the image just won't change... it goes something like this:

 

<td><input type="submit" id="submit_btn" value="Upload Files" onClick="this.disabled=true;this.value='Uploading...';"></td></tr><tr><td>image: <img src="images/blank.gif" name="IMG1"></td>

 

i've tried adding:

 

javascript:void(document.IMG1.src=\'images/progress.gif\');

document.IMG1.src=\'images/progress.gif\';

document.images['IMG1'].src=\'images/progress.gif\';

and possibly a few others, i've lost track

 

this doesnt work in IE(7) or FF, but when i click the button twice (remove the this.disabled=true part ;-)), it appears... but only after the second click...

 

any ideas why this doesnt work?

[tommyboy123x]

EDIT:  and yes, i did search / look at the thread down below

[tommyboy123x]

alright got it fixed up and working...

 

<script type="javascript">
function onSubmit(){
document.getElementById('progressBar').style.display = "block";
}
</script>
<?php
echo '<form name="form1" enctype="multipart/form-data" action="sharedoc2.php" method="POST" onsubmit="onSubmit()">';
echo '<table>';
//this whole block below is just outputting the number of boxes the user selected, seperate from the rest
if (isset($boxes)){
while ($num <= $boxes){
	echo '<tr><td>File '.$num.':</td><td><input type="file" name="uploadedfile'.$num.'" size="50"></td></tr>';
	$num++;
	echo '<input type="hidden" name="num" value="'.$num.'">';
	}
}else{
echo '<tr><td width="55px">File:</td><td><input type="file" name="uploadedfile'.$num.'" size="50"></td></tr>';
}
?>
<tr><td></td><td id="submitButton"><input type="submit" value="Upload Files" onclick="this.disabled=true;this.value='Uploading...';document.getElementById('progressBar').style.display='block';"></td></tr><tr><td><div id="progressBar" style="display: none"><img src="images/progress.gif"></div></td></tr>
<br><br>
</table>
</form>

 

it was a mix of what i was doing and some other site i saw.... put an onsubmit() and onclick()... dont really know why but wth right?