Javascript异常，同时防止按钮双重提交

Question

我有一个表单提交按钮，该按钮启动时禁用，并在满足条件（表单完成）时启用。 为了防止重复提交，我使用了一个简单的"点击禁用按钮"。 它会按预期禁用按钮，但窗体不会发布操作。 什么也没发生。 任何人都可以看到我的错误或更正表单以使其正确提交吗？

    <form method="post" action="log.php" >
    ...
    <INPUT TYPE="submit" name="submit" VALUE="LOG"  onClick="this.disabled=true" title="Log the Comment" disabled>

Answer 1

除了我在评论您的问题中的建议外，您还可以使用覆盖div。它是一个固定位置的div，位于整个页面上，z-index为999（将其放在所有内容之上）。当它的display css属性设置为none时，它不会在页面上显示/呈现，但是当它为空时，它会被绘制并覆盖阻止用户与页面中元素交互的所有内容。Submit按钮的onclick处理程序在提交表单之前取消隐藏此div。div 具有 30% 的不透明度，因此您可以看到有一些内容覆盖了页面，但仍然可以看到页面中的其他元素。

我整理了一个 php 脚本，该脚本在包含整数的服务器端文本文件中生成一些垃圾数据，并在每次加载时对其进行迭代，因此您可以查看服务器端何时进行更新。这为您证明覆盖层可防止重复提交。

<?php  
    // THIS JUST RECORDS SOME JUNK DATA AND INCREMENTS IT EACH LOAD
    // IN A TEXT FILE TO SHOW THAT THE DATA IS NOT UPDATED MORE 
    // THAN ONCE PER CLICK 
    if (isset($_GET['i'])) {
        file_put_contents("./record.txt", intval(file_get_contents("./record.txt"), 10) + 1);
    } else {
        file_put_contents("./record.txt", "1");
    }
    // THIS SIMULATES EXTENSIVE SERVER SIDE PROCESSING ... FIVE SECONDS WORTH
    sleep(5);
?>
<!--THIS IS THE OVERLAY DIV THAT BLOCKS PAGE INTERACTION DURRING SERVR SIDE PROCESSING
    THE OVERLAY IS FIXED (SO ITS POSITION IS RELATIVE TO THE BROWSER WINDOW RATHER THAN
    THE DOCUMENT) AND HAS LEFT, RIGHT, TOP, AND BOTTOM POSITIONS THAT MAKE IT FIT 
    OVER THE ENTIRE BROWSER WINDOW.
    THE BACKGROUND COLOR IS A LIGHT GRAY AND HAS AN OPACITY OF 30%
    THESE CAN BE ADJUSTED, MAYBE YOU COULD PUT A "LOADING" GIF OR SOMETHING IN IT
    AND MAKE IT FIT JUST OVER THE FORM RATHER THAN THE ENTIRE WINDOW...
    I PUT THE CSS IN THE "STYLE" ATTRIBUTE RATHER THAN IN A STYLE NODE / CSS SCRIPT
    YOU SHOULD PUT IT IN A CSS SCRIPT
-->
<div 
 id="formoverlay" 
 style="position:fixed; 
        left:0; 
        top:0; 
        right:0; 
        bottom:0; 
        background-color:#aaa; 
        filter:alpha(opacity=30); 
        opacity:.3; 
        z-index:999; 
        display:none;"
></div>
<!--THIS IS A FORM THAT SUBMITS TO A PHP PAGE CALLED ONCLICKSUBMIT.PHP (THIS PAGE)-->
<form method="GET" action="onclicksubmit.php">
    <!--HIDDEN INPUT ELEMENT NAMED i. PHP WRITES THE VALUE FROM THE "DATA FILE" ABOVE
        IN ITS "VALUE" ATTRIBUTE
    -->
    <input name="i" id="i" type="hidden" value="<?php echo file_get_contents("./record.txt");?>" />
    <!--THE ONCLICK EVENT OF THIS SUBMIT UNHIDES THE "FORMOVERLAY" DIV THAT COVERS THE PAGE-->
    <input type="Submit" onclick="document.getElementById('formoverlay').style.display='';"/>
</form>

Answer 2

我在想的是 onClick 函数在单击时运行，因此它永远不会提交。您是否尝试将提交和禁用放在您的 JavaScript 页面上并让它从那里运行所有内容？

function sub()
{
     document.getElementById("form name").submit();
     this.disabled=true;
}

然后在 onClick 中输入 "sub（）"。你也可以去掉HTML中的type="submit"。

这样，代码将运行提交函数，然后在之后禁用该按钮。您还可以将重定向放在函数中，以及：

window.location.replace("...");