javascript html form

Een html formulier wordt doorgaans gebruikt om gebruikers informatie door te geven aan de server, die de informatie bijvoorbeeld in een database kan opslaan. Maar formulieren kunnen in combinatie met Javascript ook toegepast worden binnen een webpagina. Er zijn een aantal verschillende mogelijkheden binnen een html formulier die in principe op dezelfde manier werken: Binnen een formulier kan de gebruiker een keus aangeven. Er zijn verschillende manieren om die keus aan te geven, bijvoorbeeld door een checkbox aan te vinken, een radiobutton te selecteren, een tekstveld in te vullen, etc.

In onderstaand voorbeeld bekijken we hoe javascript kan samenwerken met een html formulier. Om te beginnen hebben we een formulier nodig. We gebruiken 3 radiobuttons om een keus aan te geven. Elke radiobutton heeft een naam en een waarde nodig. In dit voorbeeld krijgen de knoppen allemaal dezelfde naam. Dat zorgt ervoor dat de gebruiker maar 1 knop tegelijk kan selecteren. De knoppen krijgen wel een verschillende waarde (value) zodat Javascript kan lezen welke keus gemaakt is.

We hebben een formulier dat op zich werkt, maar niet zo gebruiksvriendelijk is. We gebruiken een h3-tag om aan te geven wat de bedoeling is en gebruiken p-tags om bij elke knop aan te geven wat de keus is die geselecteerd kan worden. Bij het openen van de website wordt de eerste knop alvast geselecteerd door de status van deze knop op ‘checked’ in te stellen.

<body>
<form name=”formulier” action=””>
<h3>Maak een keuze:</h3>
<p> keus1<input type=”radio” name=”keus” value=”keus1″ checked=”checked”/></p
<p> keus2<input type=”radio” name=”keus” value=”keus2″ /> </p>
<p> keus3<input type=”radio” name=”keus” value=”keus3″ /> </p>
</form>
</body>

Nu kunnen we javascript gebruiken om de gemaakte keus te lezen. Om te beginnen moet er een functie uitgevoerd worden als de waarde van 1 van de radiobuttons verandert (onchange). we noemen deze functie ‘kies’.

<body>
<form name=”formulier” action=””>
<h3>Maak een keuze:</h3>
<p> keus1<input type=”radio” name=”keus” value=”keus1″ checked=”checked” onchange=”kies()”/> </p>
<p> keus2<input type=”radio” name=”keus” value=”keus2″ onchange=”kies()”/> </p>
<p> keus3<input type=”radio” name=”keus” value=”keus3″ onchange=”kies()”/> </p>
</form>
<script type=”text/javascript”>

function kies()
{

}
</script>
</body>

Vervolgens gaan we de functie ‘kies’ gebruiken om de tekst van de h3-tag aan te passen. Om informatie uit het formulier te kunnen lezen en om binnen het formulier de h3-tag te kunnen vinden, moeten de h3-tag en het formulier eerst opgeslagen worden in een variabel. Daarna kunnen we ‘innerHTML’ gebruiken om de tekst binnen de h3-tag aan te passen. Als 1 van de knoppen aangeklikt wordt komt er in de h3-tag te staan: ‘Je keus is: ‘.

function kies()
{
formulierH3.innerHTML=”Je keus is: “
}
</script>

We hebben nu een formulier dat op Javascript reageert: de tekst verandert als de selectie verandert. Nu laten we Javascript de geselecteerde keus lezen en die bijschrijven in de h3-tag. De functie wordt wel wat ingewikkelder, want Javascript moet eerst kijken welke knop geselecteerd is (checked). Daarvoor moeten we eerst een lijst maken met de mogelijke opties. die lijst bestaat uit alle input-tags in het formulier. We slaan de lijst op in een variabel.

function kies()
{
formulierH3.innerHTML=”Je keus is: “
}
</script>

Vervolgens kunnen we de opdracht beschrijven die Javascript moet uitvoeren als de eerste input-tag geselecteerd is. Als de eerste input-tag geselecteerd is, verandert de tekst in de h3-tag.Daar wordt nog steeds bijgeschreven ‘Je keus is: ‘ maar daar wordt nu aan toe gevoegd de waarde (value) van de geselecteerde knop. De value van de eerste input-tag is ‘keus1’. Als de eerste knop geselecteerd is, komt er dus in de h3-tag te staan: ‘Je keus is: keus1’.

function kies()
{
if(opties[0].checked==true)
{
formulierH3.innerHTML=”Je keus is: ” + opties[0].value;
}
}
</script>

Dit kunnen we herhalen voor de tweede en derde knop.

Naast het invoeren van een keus kan een html formulier op verschillende manieren gebruikt worden. Bijvoorbeeld om het uiterlijk of de inhoud van de website aan te passen. In dit geval kunnen we de waarde van de geselecteerde knop gebruiken om het uiterlijk van de andere knoppen aan te passen. Als de eerste knop geselecteerd is wordt de transparantie van de tweede en derde p-tag van het formulier aangepast. Daarvoor maken we eerst weer een variabel met daarin een lijst van alle p-tags.

Dit is natuurlijk makkelijk uit te breiden naar de andere knoppen: Als de tweede knop geselecteerd is, wordt de transparantie van de eerste en derde p-tag gehalveerd. Als de derde knop geselecteerd is, wordt de transparantie van de eerste en tweede p-tag gehalveerd.

Tag: javascript html form

Javascript en html formulieren gebruiken