Zo wordt jouw mailformulier altijd ingevuld
Jeroen Hoekstra |
2006-11-15 |
Programmeren en techniek
De meeste websites hebben wel iets van een mailformulier om een email te versturen naar de eigenaar van de website. Sommige velden kunnen verplichte velden zijn, die ingevuld moeten worden. Denk hierbij aan een emailveld. We beginnen met een simpel mailformulier dat bestaat uit een invulveld voor je naam en email-adres en een knop om je aan te melden. Je zou het voorbeeld kunnen zien als een aanmeldformulier voor een nieuwsbrief. Hieronder staat de HTML-code:
<html>
<head>
<title></title>
</head>
<body>
<form action="verwerk.cgi" method="post">
Naam : <input type="text" name="naam"><br>
Email: <input type="text" name="email"><br><br>
<input type="submit" value="Aanmelden">
</form>
</body>
</html>
Zou je hier niets invullen en vervolgens op 'Aanmelden' klikken, dan wordt het 'verwerk.cgi' script bij 'action' aangeroepen voor de verdere verwerking. Denk hierbij aan het opslaan van naam- en emailgegevens in een database. Het 'verwerk.cgi' script is in dit voorbeeld geen werkend script, omdat in dit artikel de nadruk ligt op de controle van de invoervelden en niet de verwerking hiervan. Op het moment dat er nu een nieuwsbrief verstuurd wordt, zul jij deze niet ontvangen. We moeten ervoor zorgen dat er een bepaalde controle op de invulvelden wordt uitgevoerd. De velden mogen namelijk niet leeg zijn, voordat het formulier verstuurd wordt. Het controleren van formulieren wordt meestal gedaan met Javascript. De Javascript-code die we gaan gebruiken in dit voorbeeld, is hieronder toegevoegd aan het HTML-formulier en staat vermeld tussen de < head> en de < /head> tag.
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function CheckIt(thisform)
{
if (thisform.naam.value == "")
{
alert("Jouw naam is niet ingevuld. Probeer opnieuw.");
thisform.naam.focus();
return (false);
};
if (thisform.email.value == "")
{
alert("Jouw emailadres is niet ingevuld. Probeer opnieuw.");
thisform.email.focus();
return (false);
};
return (true);
}
-->
</script>
</head>
<body>
<form action="verwerk.cgi" method="post" onsubmit="return
CheckIt(this);">
Naam : <input type="text" name="naam"><br>
Email: <input type="text" name="email"><br><br>
<input type="submit" value="Aanmelden">
</form>
</body>
</html>
Wat gebeurt hier nu precies? Laten we bij het begin beginnen. We geven wel een naam in op het formulier, maar vergeten het email-adres. We klikken op 'Aanmelden', met andere woorden we versturen ('submitten') het formulier. Normaal gezien zou nu het 'verwerk.cgi' script meteen worden aangeroepen. Echter, nu staat er in de form-tag een extra stukje code dat dit tegengaat, namelijk onsubmit="return CheckIt(this);". Dit stukje code wil zeggen dat zodra er op 'Aanmelden' wordt geklikt, eerst de Javascript-functie CheckIt wordt uitgevoerd en daarna pas de verwerking door het 'verwerk.cgi' script. Laten we eens kijken naar deze CheckIt-functie.
De regel function CheckIt(thisform) geeft aan dat er een functie wordt gedefinieerd, die het formulier (thisform) eerst gaat controleren. Binnen deze functie worden de 2 invulvelden naam en email (variabelen) gecontroleerd op de aanwezigheid van een waarde. Als de variabelen geen waarde hebben (variabele is leeg, == "" ), dan geeft het script aan dat de verwerking niet goed is gegaan (return (false);) . We hebben het naamveld wel ingevuld dus het eerste if-blok wordt niet uitgevoerd.
Nu wordt het volgende if-blok bekeken. Het emailveld hebben we niet ingevuld. De waarde van het emailveld (thisform.email.value) is inderdaad leeg ( == "" ), dus dit if-blok wordt wel uitgevoerd. Met alert("Jouw naam is niet ingevuld. Probeer opnieuw."); wordt een popup-schermpje getoond met daarop de tekst "Jouw naam is niet ingevuld. Probeer opnieuw." en een 'OK'-knop. Zodra er op 'OK' wordt geklikt krijgt het emailveld weer de focus (cursor knippert in dit veld) door de regel thisform.email.focus(); en kun je nogmaals proberen het email-adres in te vullen. Klik je nu weer op 'Aanmelden', dan begint de controlecyclus weer opnieuw. Dit gaat net zolang door totdat alle velden zijn ingevuld en de verwerking goed is gegaan (return (true);) . Nu pas worden de variabelen naam en email met hun waarden doorgegeven aan het 'verwerk.cgi' script voor de verdere verwerking, bijvoorbeeld het opslaan van de gegevens in de database.
Succes!
