Question

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

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

Answer 1

我在想的是onClick函数运行ON CLICK所以它永远不会提交。您是否尝试在JavaScript页面上设置提交和禁用，并让它从那里运行所有内容？

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

然后在onClick上放“sub（）”。你也可以摆脱HTML中的type =“submit”。

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

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

Answer 2

除了我对你的问题的评论中的建议，你可以使用叠加div。它是一个固定的位置div，位于整个页面上，z-index为999（将其置于所有内容之上）。当其display css属性设置为none时，它不会在页面上显示/呈现，但是当它为空时，会绘制并覆盖阻止用户与页面中元素交互的所有内容。 onclick按钮的Submit处理程序在提交表单之前取消隐藏此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>

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

2 个答案: