Question

OK, I submitted a question a little while ago pertaining to an animated loading GIF not displaying while an image is uploading ( PHP ). Now, I’ve managed to get the GIF to display while an image is uploading, but in IE and Firefox the loading GIF never goes away ( and / because ? ) the form never submits. In Chrome, the GIF goes away and the form submits. The following is what I have doing it..

<!-- Validates form -->
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script>
function validationloading(){
    // post box blank
    var x=document.forms["livefeed"]["message"].value;
    if (!$.trim($("#styled").val())){
        document.livefeed.message.focus();
        document.livefeed.message.style.border="solid 1px red";
        alert("Cannot post a blank message.");
        return false;
    }

    document.write("<table cellpadding='0' cellspacing='0' border='0' align='center' width='100%' height='130'><tr><td align='center' valign='center'><img src='images/ajax_loader.gif' width='50' height='50'></td></tr></table>");
    return true
    $("#myform").submit();
}
</script>

The following snip is what calls it from the form..

onSubmit="javascript: validationloading()" 

I’ve tried shuffling the return true value around and it changes the results but not in the way I need. It’ll submit in IE and Firefox but not display the loading GIF. I know my code is a pile of slop, but that’s why I’m here.

The following works 100% across the three browsers.. I appreciate all your help, guys !

<!-- validates form and displays loading gif -->
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script>
function validationloading(){
    // post box blank
    var x=document.forms["livefeed"]["message"].value;
    if (!$.trim($("#styled").val())){
        document.livefeed.message.focus();
        document.livefeed.message.style.border="solid 1px red";
        alert("Cannot post a blank message.");
        return false;
    }
    //

    document.livefeed.submit(); 
    document.getElementById("gif_block").style.display="block"; //gif_block is the id of the div outside the image
    document.getElementById('livefeed').style.display ='none';
    return true;

}
</script>

and the GIF div is this..

<div id="gif_block" style="display:none" align="center" ><p><image src="images/ajax_loader.gif" id="loader-img" width="50" height-"50" /></p></div>

Answer 1

There are a few things wrong with your code:

• javascript: is only meaningful in href or action attributes – basically wherever you might find a URL. It is a scheme to indicate JavaScript code to be run. In an event handler or a <script> tag, it’s just a label that you might use as part of a loop.
• return always ends execution of the current block, so it makes absolutely no sense to return true and then try to $("#myform").submit();.
• In fact, that $("#myform").submit() is potentially dangerous in that it may well cause an infinite loop: by submitting the form within its own onSubmit handler, you fire the handler again and try to submit the form anew, and so on.
• document.write() will overwrite the entire page if it’s not being called while the page is loading. While in this case that’s not really too much of an issue, I’m fairly sure it’s not what you were intending to do.
• document.forms is obsolete, you should instead use proper DOM methods like getElementById. However in this case you could just pass this as an argument to validationloading and it will refer to the form being submitted. I’m assuming this is similar to why you have document.livefeed.message – use getElementById for these.
• You never actually do anything with the return value of the function. You need to return it up the stack: onSubmit="return validationloading();"

The number one issue is the document.write thing. Remove that and the .submit() after it, and everything will be fine. There’s no need to add a “loading” GIF unless you’re using AJAX.