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
Latest posts by Par Hasard (see all)
- jQuery.ScrollTo werkt niet meer in Chrome - 25 oktober 2017
- Easter egg Google Chrome: T-Rex runner game - 7 augustus 2015
- Hoe input en select form element even breed maken? - 21 mei 2015
