为什么这个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>