Home > JavaScript > JQuery: Doppeltes Klicken / Senden des Formulars deaktivieren

JQuery: Doppeltes Klicken / Senden des Formulars deaktivieren

Man kennt es bei Scripten, dass ab und an Formulare doppelt gepostet werden und in der Datenbank laden oder man doppelte E-Mails im Posteingang auffindet. Das ist in der Regel der Fall, wenn der Nutzer, gewollt oder ungewollt, auf den Submit Button doppelt geklickt hat.

Es kommt nämlich oft vor, dass Nutzer ungeduldig sind und ein zweites Mal auf den „Abschicken“ klicken, weil die Anfrage eventuell etwas dauert und sie denken, dass der Klick nicht geklappt hat. Die Scripte werden danach zwei mal abgearbeitet und die Daten stehen dann doppelt in der Datenbank drin oder die Mail aus dem Kontaktformular kommt zwei Mal an.

Um dieses abzustellen, kann mit einem kurzen JQuery Javascript den Wert des „disabled“ Attributs des Submitbuttons verändert und auf DISABLED setzen. Der Jquery Code verhindert das doppelte Absenden des Formulars. Eigentlich recht simpel und man kann doppelte Posts verhindern:

Der Submitbutton wird nach dem Klicken deaktiviert und ein Zweitklick wird für den Nutzer nicht mehr möglich sein und er muss warten bis die Anfrage abgearbeitet wurde. Der Text des Submitbuttons wird auf „Formular bereits abgeschickt“ geändert.

  1. Burkhardt
    13. Februar 2012, 01:58 | #1

    Ahoi, ich bin mal so frei und schreibe mal was auf deiner Seite. Sieht super aus! Ich nutze auch WordPress seit kurzem kapiere aber noch nicht alles. Dein Blog ist mir da immer eine gute Motivation. Weiter so!

  2. 30. November 2012, 23:10 | #2

    Super Tipp 😉
    Habe ich gerade in die internationale Photo Sphere Community (photo.merq.org) eingebaut. Nutzer haben dort auch häufig Bilder doppelt hochgeladen…

  3. Mirco
    11. April 2013, 21:27 | #3

    Vielen Dank für dieses wunderbare Script ich habe seit Stunden danach gesucht!

  1. Bisher keine Trackbacks