的Javascript異常，同時防止按鈕提交雙

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

除了我在你的問題的意見建議，你可以使用一個覆蓋股利。這是一個固定的位置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("...");