Verhindern Doppel Formular in jQuery

Ich habe ein Formular, das Benutzer verwenden, um die Eingabe von Informationen über ein posting. Wenn Sie fertig klicken Sie auf 'Speichern' zu aktualisieren. Jedoch, in seltenen Fällen (10 in 15.000 Datensätze) der Nutzer hat ein Doppelklick auf die Schaltfläche speichern und verursachte einen doppelten form Vorlage duplizieren von items für die Buchung.

Habe ich versucht mit diesem zu verhindern:

$('input[type=submit]').click(function(){
    $('input[type=submit]').attr('disabled',true);
    //return true;
});

Aber das problem, es funktioniert einwandfrei, in Safari /Firefox etc, aber funktioniert nicht im Internet Explorer 8 (und wahrscheinlich nicht für 6 & 7)

Wenn ich drücken Sie speichern im IE8, die Taste ist deaktiviert und das ist es, keine Formular-Vorlage überhaupt.

(Ich versuchte es mit und ohne return true;)

  • haben Sie sich Gedanken über den Wechsel von einem click-Ereignis auf ein submit-Ereignis?
InformationsquelleAutor Chris | 2011-02-16
  1. 7

    Ich bin mir nicht sicher, dies ist also eine komplette Vermutung, aber vielleicht bis zu Ihrem selector gibt. Versuchen Sie stattdessen:

    $('input:submit').click(function() {
    $(this).attr('disabled', true);
});#

    Können Sie auch versuchen, abzufangen submit event selbst:

    $('form').bind('submit', function(e) {
     $(this).find('input:submit').attr('disabled', 'disabled');
});
    • Es tut die gleiche Sache, die greys aus dem submit-button und nicht das Absenden des Formulars im IE8.
    • jAndy aktualisiert es die Griffe der submit-Ereignis (wird jQuery nicht nennen es "onsubmit"? Scheint seltsam). Umgang mit dem "onsubmit" in dem Formular tun, was Sie wollen.
    • Das ist die Arbeit getan. Perfekt! - Vielen Dank
    InformationsquelleAutor jAndy
  2. 2

    Müssen Sie behandeln das onsubmit-Ereignis des Formulars, anstatt das click-Ereignis der Schaltfläche Einreichen.

    InformationsquelleAutor Kris
  3. 1

    Benutzer können drücken Sie die EINGABETASTE, um ein Formular Einreichen, damit anstelle der Bindung Schaltfläche click-Ereignis , verwenden Sie das Formular Absenden. Auch anstatt deaktivieren, ausblenden die Schaltfläche Absenden durch Austausch mit einigen be-Bild.

    jQuery("form").submit(function () {
        jQuery(":submit", this).css("display", "none");
        jQuery(":submit", this).after("<span><img src='loading.gif' /></span>");
});
    • Ich mag das denken, aber ich muss die betätigt werden, wenn die Validierung fehlschlägt auf "Absenden".
    InformationsquelleAutor Adeel
  4. -2

    Chirs, ist dies ein sehr häufiges problem, dass jeder web-Entwickler Gesichter. Und erraten, was, es hat eine sehr gut akzeptierte Lösung.

    Die Lösung ist bekannt als PRG (Post -> Redirect -> Bekommen). Lesen Sie mehr dazu auf http://en.wikipedia.org/wiki/Post/Redirect/Get

    Grundsätzlich müssen Sie die Seite verlassen, in eine HTTP-GET-Modus, so dass selbst wenn Benutzer die Seite aktualisiert, keine Daten bekommen sollte, wieder vorgelegt. Damit Sie das Formular abschicken, leiten Sie die Seite, um eine URL, die zeigt den zuletzt übermittelten Daten durch eine GET-Anforderung.

    BEARBEITEN
    Gemäß dem Kommentar unten scheint, wie Chris bereits nach dem oben genannten Paradigma. Toll. Aber er ist immer noch zu sehen duplizieren-Formular. Ich würde vorschlagen, auf die erste Vorlage, ersetzen Sie die Taste mit einem be-Bild (als erstes), so dass der Benutzer nicht sehen, eine beliebige Taste, um re-Klick 🙂

    $(document).ready(function() {
   //function which handles form submission
   $(#submitButton).replaceWith("<img src="./images/myLoader.gif>");
   //do the actual form submission after this
   ...
});
    • Es ist tatsächlich geschafft in einem Post-Redirect-Get-Modus, das problem ist, wenn Sie klicken Sie auf die speichern-Taste zweimal der browser schickt die post zweimal und dann als Erster beendet und bekommt auf den redirect zeigen, dann ist es leitet, aber die zweite hat bereits begonnen zu laufen und wahrscheinlich aus doppelten Zeilen
    • Der Artikel besagt, dass dieses Muster nicht lösen, doppelte Einsendungen verursacht, indem der Benutzer auf die submit-Taste mehrere Male.
    • Heh, das nicht wirklich DIESE Frage beantworten, aber es HAT mir helfen, mit einem nicht verwandten Thema. Danke!
    InformationsquelleAutor peakit
Schreibe einen Kommentar