在IE和Firefox中使用Javascript表单onSubmit无法正常工作

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 couple of issues there:

1. If you want validationloading to prevent the submission via its return value, you need to add return to that:

    onsubmit="return validationloading()" 

   That's because under-the-covers, the browser converts the above to a handler function that looks something like this:

    function(event) { // ...your code here... } 

   ...and uses the return value of that function.

2. If you use document.write in a loaded page, the entire page content is wiped out and replaced with what you output in document.write . I wouldn't be surprised if that interfered with the form submission. document.write has basically no place in web apps and hasn't for the last 12 years or so. :-) Use the DOM objects and methods to add elements to the page, and/or to change their styling so you hide some and reveal others. (A bit of searching on your favorite search engine should give you plenty to work with.)

3. You have code that can never be reached: The submit call after the return true .

    return true $("#myform").submit(); // <== This code will never run 

   return exits the function, so the code after it will never run.

Other notes (which are almost certainly not the problem):

• With onxyz handler attributes, you don't use the javascript: pseudo-protocol. Their content is already JavaScript. You only use javascript: where a URL is expected, as with the href on a link. It doesn't cause an error, though, usually, because it looks like a labelled statement to the JavaScript engine.
• The proper attribute name is in all lower case. It only matters if you're doing XHTML, though, so it probably doesn't matter for you.

Answer 2

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.