TalkPHP - View Single Post

wGEric · 03-09-2011, 04:57 PM

The <script> needs to go below the form. What is happening is the <script> is looking for elements on the page that don't exist yet because the browser hasn't gone that far down the page.

For debugging in Firefox you can use the Error Console or Firebug.

The following code uses IDs to target the elements and changes the CSS instead of changing an attribute. Also the event name is all lowercase.

HTML Code:

<style>
#pleasewait {
    display: none;
}
</style>
<form name="addimage" id="addimage" method="post" enctype="multipart/form-data"  action="">
<table class="forms">
    <tr>
    <td colspan="2">
    <h3>Add Picture</h3>
    </td>
    </tr>
    <tr>
    <td colspan="2"><img class="pleasewait" id="pleasewait" src="http://www.talkphp.com/images/pleasewait.gif"><span class='red'>
   <?php print $view->getFeedback(); ?> 
    </span></td>
    </tr>
    <tr>
    <td>
        <label for="alt">Image Text*</label>
    </td>
    <td>
        <input type='text' name='alt' id='alt' size='20' maxlength='100'>
    </td>
    </tr>
    <tr>
    <td><input type="file" name="image"></td>
     <td><input name="Submit" type="submit" value="Upload Picture"></td>
    </tr>
</table>
</form>
<script>
document.getElementById('addimage').onsubmit = function (e) {
    document.getElementById("pleasewait").style.display = 'block';
};
</script>