爲什麼這個JavaScript代碼不能按預期工作？

Question

這個微小的JavaScript以及一些CSS應該通過在點擊提交後凍結屏幕來防止重複輸入數據庫。

到目前爲止，在使用該應用程序提交條目的超過200人中，其中6人已經設法提交重複條目。

我們懷疑舊版瀏覽器可能會對雙重條目負責。

我們仍在調查。

這個假設是否正確？

如果是，是否有一種方法可以改善此代碼在所有瀏覽器上工作？

我想保留這段代碼，而不是因爲愉快的外觀和感覺而去另一個，但是對更好的東西開放。

<script type="text/JavaScript"> 
    function FreezeScreen(msg) { 
     scroll(0, 0); 
     var outerPane = document.getElementById('FreezePane'); 
     var innerPane = document.getElementById('InnerFreezePane'); 
     if (outerPane) outerPane.className = 'FreezePaneOn'; 
     if (innerPane) innerPane.innerHTML = msg; 
    } 
</script> 

--css

<style type="text/css"> 
    .FreezePaneOff 
    { 
     visibility: hidden; 
     display: none; 
     position: absolute; 
     top: -100px; 
     left: -100px; 
    } 

    .FreezePaneOn 
    { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     visibility: visible; 
     display: block; 
     width: 100%; 
     height: 100%; 
     background-color: #666; 
     z-index: 999; 
     filter:alpha(opacity=85); 
     -moz-opacity:0.85; 
     padding-top: 20%; 
    } 

    .InnerFreezePane 
    { 
     text-align: center; 
     width: 66%; 
     background-color: #171; 
     color: White; 
     font-size: large; 
     border: dashed 2px #111; 
     padding: 9px; 
    } 
</style> 

****** UPDATE ******

我在這裏發佈我的迴應，因爲那個東西不會讓我補充愚蠢的消息發表評論，每5秒只允許1條評論，並且自上次評論被添加以來已經過了10分鐘。

非常感謝@PPvG和@Random。我需要一個人的腳本（更可能是@ Random的，因爲我不明白@PPvG意思是什麼@ ..提交的東西...），但是我需要使用你中的一個人的js嗎？除了我目前使用的那個？此外，asp.net是否允許表單動作=「〜」...？

Answer 1

我同意@Random。只需禁用提交按鈕，並在提交一次後阻止表單的默認操作。類似這樣的：

var submitted = false; 
var form = document.getElementById('form_id'); 
var submitButton = document.getElementById('submit_button_id'); 

form.onsubmit = function() { 
    if (submitted) { 
     FreezeScreen("Already submitted!"); 
     // Stop the form from being submitted a second time: 
     return false; 
    } 

    // ... do your submitting stuff ... 

    submitted = true; 
    submitButton.disabled = true; 
} 

Answer 2

這些都不會阻止頁面提交。爲什麼不攔截頁面的on_submit動作並在頁面已經提交的情況下取消呢？

<form action="~" onSubmit="return CheckSubmitted();"> 
    ....... 
</form> 

<script type="text/javascript"> 
var submitted = false; 

function CheckSubmitted() 
{ 
    if (submitted == true) { return false; } 
    else { submitted = true; return true; } 
} 
</script>