Dubbel versturen van een formulier voorkomen II:
'submit' afvangen
Een (mail-)formulier is een goede manier om de bezoekers van je website in de gelegenheid te stellen om
te reageren op de inhoud, informatie te vragen, een bestelling te plaatsen, enzovoort.
Het versturen van zo'n formulier gebeurt door een klik op een 'submit' button. Natuurlijk is het
niet de bedoeling dat er meer dan eenmaal op de submit-button wordt geklikt. Anders krijg je twee mails,
dubbele bestellingen of meer. Ook dubbelklikken op een submit-button is dus ongewenst.
Je kunt dit voorkomen door de submit-button te inactief te maken zodra er op geklikt is.
Een voorbeeld:
Hieronder zie je een eenvoudig mailformulier. Als je op de knop "versturen" klikt, verschijnt
er een alert die meldt dat het bericht is verstuurd. Ook zie je dat de knop "versturen" heel even grijs
wordt: Hij is uitgeschakeld (disabled) zolang de browser bezig is het formulier naar de server te sturen. Het is voor
de gebruiker dus bijna onmogelijk om het bericht meer dan éénmaal te versturen.
In dit voorbeeld wordt gereageerd op het versturen van het formulier naar de server. Dat doe je door
onsubmit="document.getElementById('VerstuurKnop').disabled = true;" op te nemen in de
<form>-tag. De <input>-tag waarmee je de submit-button maakt, heeft id="VerstuurKnop".
Daarmee is éénduidig bekend welke knop er moet worden uitgeschakeld.
De code van het voorbeeld-formulier staat onderaan deze bladzijde.
- De werking van deze aanpak is beperkt: De submit button blijft disabled zolang de PC bezig is de submit-actie
uit te voeren (lees: het formulier naar de web-host te versturen). Meestal duurt dat niet langer dan een
enkele seconde. Het is in elk geval lang genoeg om dubbel versturen door dubbel-klikken te voorkomen.
- In dit voorbeeld zijn alle overbodige toeters en bellen weggelaten. Zo ontbreken de attributen action en method in de <form>-tag.
- De alert wordt gegenereerd door onSubmit in de <form>-tag. Het kan natuurlijk ook met onClick() in de <input>-tag.
Gebruik:
- De code staat in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <BODY>, op de plaats waar je het nodig hebt).
<form onsubmit="JavaScript:document.getElementById('VerstuurKnop').disabled=true;alert('Dit formulier heeft geen functie')">
<table border="1" cellspacing="1" cellpadding="5" align="center" bgcolor="#DDFFDD" frame="box" rules="none"><tr>
<td align="center" colspan="2"><b>Voorbeeld mailformulier</b></td>
</tr><tr>
<td colspan="2">Bericht:<br><textarea rows="4" cols="40">
He, moet je horen,
Op Ben's Hobbyhoekje vind je veel handige dingen voor je eigen website!
</textarea></td>
</tr><tr>
<td align="right">afzender:</td>
<td><input type="text"size="25" maxlength="50"></td>
</tr><tr>
<td align="right">e-mail:</td>
<td><input type="text"size="25" maxlength="50"></td>
</tr><tr>
<td align="center" colspan="2">
<input type="submit" style="font-weight:bold" value="Versturen" id="VerstuurKnop">
<input type="reset" value="Opnieuw..."></td></tr></table></form>
Opmerking:
Er zijn ook andere mogelijkheden om te voorkomen dat meer dan eens op de 'submit' button wordt geklikt. Zie
daarvoor het item Dubbel versturen van een formulier voorkomen I:
'click' afvangen.
