Dubbel versturen van een formulier voorkomen I:
'click' 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"
grijs is geworden: Hij is uitgeschakeld (disabled). Het is voor de gebruiker dus niet mogelijk
om het bericht meer dan éénmaal te versturen.
In dit voorbeeld wordt gereageerd op de klik van de muis op de submit-button. Dat doe je door
onclick="this.disabled = true;" op te nemen in de <input>-tag waarmee je de
submit-button in je formulier zet.
De code van het voorbeeld-formulier staat onderaan deze bladzijde.
- De submit button blijft disabled totdat je in een formulier-veld klikt (lees: de focus krijgt). Dan wordt via "onfocus"
de Javascript-function doReset() uitgevoerd. Die zet disabled weer op false. Dat duurt in elk geval lang genoeg
om dubbel versturen door dubbel-klikken te voorkomen.
- In dit voorbeeld zijn andere toeters en bellen weggelaten. Zo ontbreken de attributen action en method in de <form>-tag.
- De alert wordt gegenereerd door onclick in de <input>-tag. Het kan natuurlijk ook met action in de <form>-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>
<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" onfocus="doReset()">
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" onfocus="doReset()"></td>
</tr><tr>
<td align="right">e-mail:</td><td><input type="text"size="25" maxlength="50" onfocus="doReset()"></td>
</tr><tr>
<td align="center" colspan="2">
<input id="submitKnop" type="submit" style="font-weight:bold" value="Versturen" onclick="JavaScript:this.disabled=true;alert('Dit formulier heeft geen functie')">
<input type="reset" value="Opnieuw..."></td></tr></table></form>
<script>
function doReset() {
document.getElementById('submitKnop').disabled=false
}
</script>
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 II:
'submit' afvangen.
