Question

This tiny JavaScript, along with some CSS is supposed to prevent duplicate entries into the database by freezing the screen after Submit has been clicked.

So far, out of over 200 people who have used the app to submit entries, 6 of them have managed to submit duplicate entries.

We are suspecting that older browsers may be responsible for the double entries.

We are still investigating.

Could that assumption be correct?

If yes, is there a way to improve this code to work on all browsers?

I would like to keep this code, rather than go for another because of the pleasant look and feel but open to something better.

<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******

I am posting my response here since that thing wouldn’t allow me to add comments with the stupid message that only 1 comment per 5 seconds allowed and it has been 10 minutes since the last comment was added.

Thanks alot @PPvG and @Random. Do I need to one of you guy’s script (more likely @Random’s because I don’t understand what @PPvG meant by //…do your submitting stuff…) but do I need to use one of you guy’s js in addition to the one I am currently using? Also, does asp.net allow form action=”~” …?

Answer 1

I agree with @Random. Just disable the submit button and prevent the form’s default action after submitting once. Something like this:

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;
}