Bron afbeelding: uicookies.com/css-input-box/
Op cmd.camp/html-formulier-elementen/ heb je al kunnen zien dat je heel eenvoudig formulieren kunt maken in HTML. Met bijvoorbeeld button, select, textarea, en de input types zoals text, radio, checkbox, password etc.
Maar hoe kun je de waarden die ingevuld of aangeklikt worden uitlezen en weer gebruiken in je script?
We behandelen twee methoden: Op een nieuwe pagina in je site via submit, of direct via .value.
Het formulier
Maak een nieuw project met HTML, CSS en JS volgens onze checklist .
Maak in de body van het HTML bestand een formulier met
<form>
</form>
Zet in dit formulier een aantal elementen, in ieder geval een text input, een checkbox, een select en een button. Eventueel kun je ook nog werken met labels.
Geef elk element een goede name, die de inhoud beschrijft. Je hoeft ze geen id te geven.
<input type="text" name="username">
Heb je een groep radio inputs? Geef ze allemaal dezelfde name en een andere value
Als je wilt kun je je elementen via CSS nog van opmaak voorzien, maar dit is voor deze les niet persé nodig.
Zodra je tevreden bent maak je een kopie van het mapje met je bestanden, we gaan twee methoden proberen en hebben daar allebei deze basis voor nodig.
Methode 1: submit
Vaak zie je dat je, nadat je een formulier hebt ingevuld en op een knop hebt geklikt, je naar een nieuwe pagina gaat waar iets met je gegevens gebeurd is. Meestal zijn je gegevens naar een server verstuurd die ze opgeslagen heeft, op de volgende pagina zie je dan een bevestiging. We kunnen je gegevens ook naar een nieuwe HTML pagina sturen, waar we via JavaScript de waarden kunnen gebruiken.
Maak in het mapje een tweede HTML pagina: pagina2.html, en een JS bestand. Koppel de nieuwe HTML pagina aan het nieuwe script.
Ga terug naar je formulier en zoek je button. Geef deze knop als type submit:
<input type="submit" value="Verzenden!">
- of -
<button type="submit">Verzenden!</button>
Zoek de <form> tag. We gaan hier instellen dat het formulier naar de nieuwe pagina gestuurd moet worden:
<form action="pagina2.html" method="GET">
Je ziet dat we twee attributen toevoegen. action vertelt waar het formulier naartoe verzonden moet worden, in ons geval dus de nieuwe pagina. method is de manier waarop het formulier verstuurd wordt. Als je zelf een webserver hebt kun je ook de methode "POST" gebruiken, die veiliger en veelzijdiger is, maar wij gebruiken nu "GET", die alle informatie via de url meestuurt:
Probeer het zelf, door iets in het formulier in te vullen en op verzenden te klikken. Je ziet als het goed is dat je nieuwe pagina geopend wordt, en alles wat je hebt ingevuld staat in de adresbalk. GET stopt dus alle gegevens in de url. Dit noemen we parameters
In je script gaan we nu deze parameters bekijken:
// parameters opslaan in een variabele
var parameters = new URLSearchParams(window.location.search);
// een specifieke parameter tonen in de console
var usernameInput = parameters.get('username');
console.log(usernameInput);
Verander username naar de name van het text-veld in je formulier. Als het goed is zie je nu een waarde die je hebt ingevuld in het formulier in de console.
Wat gebeurt er in bovenstaande code? Als pagina 2 geladen wordt, maken we een variabele die we parameters noemen. Hierin slaan we alle parameters op die verzonden zijn door het formulier. Vervolgens maken we een variabele die we usernameInput noemen. We halen de 'username' uit 'parameters' en slaan die op in usernameInput. Vervolgens kunnen we die variabele gebruiken om de waarde te tonen, bijvoorbeeld in de console.
Dus: na deze code zit de tekst die je hebt getypt in de variabele usernameInput
Probeer nu hetzelfde voor de andere elementen. Als het goed is zie je dat voor checkbox elementen je on ontvangt, als het aangeklikt is. Als de checkbox niet is aangeklikt, wordt de waarde niet gestuurd.
Nu gaan we onze HTML, CSS en JS kennis inzetten voor deze opdracht:
Maak een div in je tweede pagina.
Zorg dat de tekst die je in je formulier typt, in die div getoond wordt.
(tip: gebruik innerHTML)
Zorg dat als de checkbox in je formulier aangevinkt is (gelijk is aan 'on'), deze div groen wordt. Zoniet, dan rood.
(tip: gebruik style.backgroundColor)
Gevorderde Methode: value
Let op: alleen voor gevorderden. Als methode 1 voor jou werkt en goed genoeg is, stop dan hier met lezen 😉
Soms wil je liever niet dat er een nieuwe pagina geladen wordt, maar dat het resultaat op dezelfde pagina zichtbaar wordt. Bijvoorbeeld de zoekbalk van Google, die al aan de slag gaat terwijl je nog aan het type bent. Voor deze methode kunnen we geen gebruik maken van submit, maar gaan we rechtstreeks de waarde opvragen van elementen.
Sluit de huidige bestanden en open het kopietje dat je eerder gemaakt hebt.
Ditmaal maken we geen tweede HTML pagina, maar maak je een nieuw JavaScript bestand dat je koppelt onderaan deze pagina.
Maak in dit scriptbestand een nieuwe functie, genaamd leesFormulier. Zet in deze functie
console.log('Hello World!');
Verander de knop in het formulier, zodat daarmee de functie gestart wordt. Als het goed is moet je nu door het klikken op de knop 'Hello World!' in je console zien.
In de leesFormulier functie kunnen we nu direct de waarde van een formulierelement uitlezen.
Je hebt al eerder geleerd dat je met document.querySelector(...) naar een element kunt verwijzen.
Met document.querySelector("[name='NAAM']") verwijzen we naar de naam van een element. Let op alle haakjes en aanhalingstekens.
Door daar .value achter te zetten kun je naar de waarde van dat element verwijzen:
function leesFormulier() {
var username = document.querySelector("[name='username']").value;
console.log(username);
}
Als je een element hebt met als name 'username', wordt met deze code de waarde van dat element in een variabele opgeslagen, en vervolgens in de console getoond.
Bovenstaande code werkt voor de meeste formuliervelden. Alleen checkboxes en radiobuttons werken net even anders.
Hier zie je hoe je de waarde van een checkbox uitleest:
var vegetarian;
if (document.querySelector("[name='vegetarian']").checked) {
vegetarian = 1;
} else {
vegetarian = 0;
}
En hier hoe je de geselecteerde waarde van een groep radio inputs leest:
var gender = document.querySelector("[name='gender']:checked").value;
Test jezelf weer met deze opdracht:
Maak een div bovenaan je pagina.
Zorg dat tekst die je in je formulier typt, in die div getoond wordt.
Zorg dat als de checkbox in je formulier aangevinkt is (gelijk is aan 1), deze div groen wordt. Zoniet, dan rood.
Bonus: onchange
In plaats van een knop die de functie start, kun je de functie ook starten op het moment dat je een verandering in het formulier maakt.
Voor input types "text", "password" en "search" gebruik je oninput.
Voor alle andere elementen gebruik je onchange.
