Deze Javascript tutorial werkt met formulieren. Voordat je aan deze tutorial begint is het belangrijk om een zekere basiskennis van formulieren in HTML te hebben. Heb je deze niet, kijk dan eens naar de HTML Formulieren tutorial.
om makkelijk met DOM te kunnen werken is het handig om te weten dat er voor het aanroepen van formulieren een aantal verkorte schrijfwijzen bestaan. We gaan deze bespreken. We nemen als voorbeeld het volgende formulier:
<form id="eenformulier" name="denaamvaneenformulier">
<input type="text" id="eentekstvak" name="denaamvaneentekstvak" />
</form>
Nu willen we de inhoud van het tekstvak aanpassen. De manier die je nu al kent werkt via getElementById('eentekstvak'). Je krijgt dan dit:
<input type="button" onclick="document.getElementById('eentekstvak').value='tekst!'" />
Je hebt nu het formulierveld direct opgeroepen. Je kunt je voorstellen dat als je voor elk veld een aparte id moet verzinnen het al snel een zooitje word. Je kunt daarom ook het veld oproepen via het formulier. Dat doe je zo:
<input type="button" onclick="document.getElementById('eenformulier').denaamvaneentekstvak.value='tekst!'" />
Dit levert precies hetzelfde op. Dit is waarschijnlijk overzichtelijker, maar wel langer. Let er wel op dat je hier gebruik maakt van de naam van het tekstveld, en niet van de id. Er is nog een manier:
<input type="button" onclick="document.forms[0].denaamvaneentekstvak.value='tekst!'" />
Dit is misschien nog makkelijker. Hierbij roep je eerst het formulier nummer 0 op (het eerste formulier dus) en zoek je vervolgens naar denaamvaneentekstvak. Er is nog een manier:
<input type="button" onclick="document.denaamvaneenformulier.denaamvaneentekstvak.value='tekst!'" />
Deze laatste is misschien wel het makkelijkste. Welke manier jij gebruikt mag je zelf weten, maar hou er rekening mee dat ze allemaal gebruikt kunnen worden. Omdat de laatste het eenvoudigst te gebruiken is gebruiken we die.
Als je gesnapt hebt hoe DOM en hoe event handlers werken weet je eigenlijk alles al van het werken met formulieren in Javascript. Ik kan me goed voorstellen dat je er nog moeite mee hebt om alles te gebruiken, en misschien zijn er dingen nog niet duidelijk. Ik ga daarom nu een voorbeeld geven.
Stel: je hebt een formulier dat de gebruiker in moet vullen. Nu wil je zeker de gebruiker waarschuwen als hij een veld leeg laat. Dit gaan we aanpakken door onblur="" te gebruiken. Je zet dan in het input-veld de onblur-parameter met daarin code die controleerd of het veld leeg is of niet. Als het leeg is geeft hij een alert(). Hieronder zie je de code:
<form name="adresgegevens">
<input type="text" name="naam" onblur="if(document.adresgegevens.naam.value==''){ alert('U hebt niets ingevuld!'); }">
</form>
Hoe dat eruit komt te zien zie je hieronder:
Dit was de tutorial over het aanroepen en wijzigen van formulieren met Javascript.
