hide the submit button onclick

[jmc92]

I found this question but online but there was no answer so im asking it here for I also would like to know


"i'm tryin to get this code to work but i'm having no luck, i want it to hide the submit button on click and show this loading image, any help is appreciated, thanks"

 
    <td colspan = "10"><input type = "button" style = "visibility:visible;" value = "Generate Report" onclick = "this.style.visibility:'hidden', loading.style.visibility:'visible'">
      <img src="../../images/img-loading.gif" alt="" border="0" name = "loading" style = "visibility:hidden;"></td>

[jscheuer1]

Instead of:

onclick = "this.style.visibility:'hidden', loading.style.visibility:'visible'"

It should be:

onclick = "this.style.visibility='hidden', loading.style.visibility='visible'"

That will work. I would do it as:

onclick="this.style.visibility = 'hidden'; if(document.images){document.images.loading.style.visibility = 'visible';}"

However, if this is a real form, and the form submits, and the page reloads, the submit button will revert to visible and the loading image revert to hidden. This is critical. There are ways to submit a form without the page reloading, though it would depend upon the purpose of the form and other considerations as to whether or not this would be feasible. Alternatively, if there is a way of determining whether or not the form has been submitted, then even if the page reloads the status of the form (having been submitted or not) could be used to determine whether the button and the image are seen or not. At that point though, server side code might be a better choice.

Also, from a layout point of view, you might want to use the display property (inline for seen, none for unseen) rather than the visibility property. But the image might not preload then, so one would want to mix the two:

onclick="this.style.display = 'none'; if(document.images){document.images.loading.style.visibility = 'visible';}"

[jmc92]

wow
thanks man it works perfectly