Voorkom duplicate form submission met jQuery

Iedereen kent dubbelklikken, een gewoonte bij het gebruiken van een PC om een folder of document te openen. Soms gebeurt het dat een gebruiker, gewild of ongewild, hetzelfde doet bij het verzenden van een ingevuld formulier waar je maar 1 keer hoort te klikken.

Houdt een ontwikkelaar van een formulier hier geen rekening mee, dan wordt het ingevulde formulier 2 of meer keer verzonden en krijg je dus duplicate content in de database.

Hoe kan je meervoudige form submissions dan tegengaan?

Dit is het stukje jQuery code dat ik gebruik:

$("#myform").submit(function(){
  $('input[type="submit"]').click(function(event){
    event.preventDefault();
  });
});
  •  #myform is de ID van het formulier.
  • input[type=”submit”] is de verzendknop

Hoe werkt dit nu?

event.preventDefault(); zorgt ervoor dat de basisfunctionaliteit van een element genegeerd wordt. In dit geval gaat het om het input element met als attribuut type=”submit”. Beter gekend als de verzendknop. Dit is wat we willen bereiken: de verzendknop is niet meer actief.
Ik heb een click() functie gekoppeld aan dit input element. Maw de verzendknop wordt pas genegeerd vanaf het moment dat je er de eerste keer op klikt.
Maar deze click functie wordt pas actief nadat het formulier met als id=”myform” verzonden werd, na een submit() dus.

Kort gezegd: het formulier wordt 1 keer verstuurd naar de server maar nadien niet meer omdat de verzendknop dan niet meer werkt. Elke meervoudige klik wordt genegeerd door de browser.

Par Hasard

Ik ben 30+, nader de 40 zelfs, met een gezonde internet verslaving. Gelukkig getrouwd en fiere vader van 2 dochters. Wil een kat in huis, maar mag niet. 🙁

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *