0

好的，我不久前提交了一个问题，该问题与上传图像时未显示的动画加载 GIF (PHP) 有关。现在，我已经设法在图像上传时显示 GIF，但在 IE 和 Firefox 中，加载的 GIF 永远不会消失（和/因为？）表单永远不会提交。在 Chrome 中，GIF 消失并提交表单。以下是我正在做的事情..

<!-- 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>

以下片段是从表单中调用它的内容。

onSubmit="javascript: validationloading()"

我试过改组返回的真实值，它改变了结果，但不是我需要的方式。它会在 IE 和 Firefox 中提交，但不会显示加载的 GIF。我知道我的代码是一堆废话，但这就是我在这里的原因。

以下在三种浏览器中 100% 有效。感谢你们的帮助，伙计们！ 

<!-- 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>

GIF div是这个..

<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>
4

2 回答 2

1

那里有几个问题：

  1. 如果您想validationloading通过其返回值阻止提交，您需要添加return：

    onsubmit="return validationloading()"

    那是因为在幕后，浏览器将上面的内容转换为一个看起来像这样的处理函数：

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

    ...并使用该函数的返回值。

  2. 如果您document.write在加载的页面中使用，整个页面内容将被清除并替换为您在document.write. 如果这会干扰表单提交，我不会感到惊讶。document.write在网络应用程序中基本上没有位置，并且在过去 12 年左右没有。:-) 使用 DOM 对象和方法向页面添加元素，和/或更改它们的样式，以便隐藏一些并显示其他元素。（在你最喜欢的搜索引擎上进行一些搜索应该会给你很多工作。）

  3. 您有永远无法到达的代码submit：return true.

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

    return退出函数，因此它之后的代码将永远不会运行。

其他注意事项（几乎可以肯定不是问题）：

  • 使用onxyz处理程序属性，您不使用javascript:伪协议。他们的内容已经是JavaScript。您只javascript:在需要 URL 的地方使用，如href链接上的 。不过，它通常不会导致错误，因为它看起来像是JavaScript 引擎的标记语句。
  • 正确的属性名称全部小写。不过，这仅在您使用 XHTML 时才重要，因此对您来说可能无关紧要。
于 2012-11-05T18:29:14.793 回答
1

您的代码有一些问题：

  • javascript:仅在hreforaction属性中有意义 - 基本上在您可以找到 URL 的任何地方。它是一种指示要运行的 JavaScript 代码的方案。在事件处理程序或<script>标签中，它只是一个标签，您可以将其用作循环的一部分。
  • return总是结束当前块的执行，所以绝对没有意义return true再尝试$("#myform").submit();.
  • 事实上，这$("#myform").submit()有潜在的危险，因为它很可能导致无限循环：通过在其自己的onSubmit处理程序中提交表单，您再次触发处理程序并尝试重新提交表单，等等。
  • document.write()如果在页面加载时没有调用它，它将覆盖整个页面。虽然在这种情况下这并不是什么太大的问题，但我很确定这不是你打算做的。
  • document.forms已过时，您应该改用适当的 DOM 方法，例如getElementById. 但是在这种情况下，您可以将this其作为参数传递给validationloading它，它将引用正在提交的表单。我假设这与您拥有的原因相似document.livefeed.message-getElementById用于这些。
  • 您实际上从未对函数的返回值做任何事情。你需要把return它放在堆栈上：onSubmit="return validationloading();"

第一个问题是document.write事情。删除它和.submit()它之后，一切都会好起来的。除非您使用 AJAX，否则无需添加“加载”GIF。

于 2012-11-05T18:31:29.483 回答