防止按钮双重提交时出现Javascript异常

Question

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

    <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("...");