Verwenden von jquery, um das erneute Übermitteln des Formulars zu verhindern

Question

Ich benutze jquery's .submit(), um das Submit-Ereignis des Benutzers abzufangen, jedoch habe ich ein Problem festgestellt.

Wenn der Benutzer den Absenden-Button einzeln anklickt, wird das Formular normal übermittelt, aber wenn ein Benutzer es absichtlich schnell anklickt, wird es mehrmals übergeben, was doppelte Daten in der Datenbank verursacht.

Was ist die Lösung für diese Art von Problem?

Update: Nun, ich sehe einige der Ratschläge gesagt, Deaktivieren der Absenden-Taste. Dies sollte verhindern, dass das Formular mehrfach eingereicht wird, aber das Problem ist, dass das Formularelement in meiner Seite nicht aktualisiert wird, wenn ich es deaktiviere, kann der Benutzer es nicht mehr senden, das Deaktivieren für 15s funktioniert vielleicht, ist aber Dies ist der richtige Weg, um dieses Problem zu lösen?

Answer 1

das Absenden Deaktivieren Taste ist in der Tat der Weg zu gehen.

In vielen Fällen hängt die auszuführende serverseitige Logik jedoch vom Vorhandensein des Name-Wert-Paares der betreffenden Übergabeschaltfläche in der Anforderungsparameterzuordnung ab. Vor allem in serverseitigen komponentenbasierten MVC-Frameworks wie MS ASP.NET und Sun JSF, aber auch in "einfachen" Formularen mit mehr als einem Submit-Button. Das Name-Wert-Paar der gedrückten Schaltfläche "Senden" ist erforderlich, um die auszuführende Aktion zu bestimmen. Wenn Sie die Schaltfläche deaktivieren, wird das Name-Wert-Paar in der Anforderungsparameterzuordnung vollständig ausgeblendet, und die Serverseite kann keine Aktion ausführen oder die falsche Aktion ausführen.

Es gibt grundsätzlich zwei Möglichkeiten, um dies zu realisieren:

1. Verwenden setTimeout() die Taste nach wenigen Millisekunden zu deaktivieren, so dass das Name-Wert-Paar ohnehin gesendete. 50ms ist eine erschwingliche Menge.

   $("form").submit(function() { 
       var form = this; 
       setTimeout(function() { 
        $(':submit', form).attr('disabled', true); 
       }, 50); 
   }); 
   

2. Kopieren Sie die Name-Wert-Paar der tatsächlich gedrückt Submit-Button in einem versteckten Eingang des Formulars. Dies ist ein wenig komplizierter, da diese Information im submit Ereignis der <form> nicht verfügbar ist. Sie müssen die $(document) das zuletzt angeklickte Element erfassen lassen.

   $("form").submit(function() { 
       $(':submit', this).attr('disabled', true); 
       $(this).append($('<input/>').attr({ 
        type: 'hidden', 
        name: $.lastClicked.name, 
        value: $.lastClicked.value 
       })); 
   }); 
   
   $(document).click(function(e) { 
       e = e || event; 
       $.lastClicked = e.target || e.srcElement; 
   }); 
   

---

aktualisieren: wie pro Ihre Update:

Nun, ich sehe einige der Ratschläge den Absenden-Button sagte zu deaktivieren. Dies sollte verhindern, dass das Formular mehrmals gesendet wird, aber das Problem ist, dass das Formularelement in meiner Seite nicht aktualisiert wird, wenn ich es deaktiviere, kann der Benutzer es nicht mehr senden, das Deaktivieren für 15s funktioniert vielleicht, aber ist das Der richtige Weg, um dieses Problem zu lösen?

Sie feuern also eigentlich eine ajaxische Anfrage. Sie könnten einfach die Schaltfläche (n) im Callback-Handler der jjQuery-Ajax-Funktion wieder aktivieren. Angenommen, Sie sind mit jQuery.post:

$("form").submit(function() { 
    // Disable buttons here whatever way you want. 

    var form = this; 
    $.post('some/url', function(data) { 
     // Re-enable buttons at end of the callback handler. 
     $(':submit', form).attr('disabled', false); 
    }); 
}); 

Answer 2

Deaktivieren Sie die Schaltfläche Senden in der jQuery-Funktion.

http://jquery-howto.blogspot.com/2009/05/disable-submit-button-on-form-submit.html

Answer 3

versucht der Absenden-Button auf Formular deaktivieren ....

$("form").submit(function() { 
    $(':submit',this).attr('disabled','disabled'); 
    $('selector').load(url,function(){ 
     $(':submit',this).removeAttr('disabled'); 
    }) 
});​ 

quick demo

Answer 4

Das eigentliche Problem liegt bei Datenbank-Layer muss entworfen werden Doppelungen zu vermeiden. Hier ist eine universelle, aber ein wenig hässliche Lösung:

Wenn Sie eine Seite zum ersten Mal rendern, können Sie eine GUID erstellen. Sagen Sie, Operations-ID. und lege es in einen Viewstate. Wenn Sie ein Ereignis auf der Serverseite verarbeiten, fügen Sie diese GUID einfach in eine Tabelle ein, sagen Sie OngoingOperations, wo es sich um einen Primärschlüssel handelt. Die erste Einfügung wird erfolgreich ausgeführt, die andere wird fehlschlagen. Um benutzerfreundlicher zu sein, können Sie einfach nachfolgende Operationen überspringen und den Status der ersten zurückgeben.

OngoingOperations Die Tabelle kann wie folgt aussehen:

TABLE OngoingOperations CREATE ( OperationID UNIQUEPrimärSchlüssel, OperationDate DATETIME Standard getDate(), OperationStatus nvarchar (max) );

OperationStatus - ist eine Statusnachricht oder Daten, die von nachfolgenden Übermittlungen an den Client zurückgegeben werden. Hier können Sie eine Flagge (ok oder nicht) oder eine detaillierte Nachricht verwenden - wie Sie möchten.

Diese Tabelle erfordert die Sammlung alter Datensätze, z. B. jede Stunde, in der Sie Vorgänge löschen, die mindestens zwei Stunden zuvor abgeschlossen wurden.

Anton Burtsev

Answer 5

Try this:

$("form").submit(function() { 
    var form = this; 
    setTimeout(function() { 
     $(':submit', form).attr('disabled', true); 
    }, 50); 

    setTimeout(function() { 
     $(':submit', form).removeAttr('disabled'); 
    }, 1000); 
});