Formulier-data ophalen

Wat ga je leren?

Je leert hoe je tekst die de gebruiker in een formulierveld typt uitleest met JavaScript via .value, en die data direct gebruikt — bijvoorbeeld om te tonen, te controleren of mee te rekenen.

Theorie

In Formulieren leerde je hoe je een formulier bouwt. Tot nu toe deed dat formulier nog niets — typen kon je wel, maar de tekst kwam nergens terecht.

Met JavaScript haal je de ingevulde tekst op via de eigenschap .value:

const naam = document.getElementById('naam-veld').value;

naam bevat nu wat de gebruiker getypt heeft. Dat is een string (zie Waarden en operatoren).

Werkt voor verschillende velden

Element	Wat .value teruggeeft
<input type="text">	De getypte tekst
<input type="number">	De getypte tekst (let op: string, niet number!)
<textarea>	De inhoud van het tekstvak
<select>	De value van de gekozen <option>

Number-invoer: omzetten

Bij <input type="number"> is .value nog steeds een string. Om mee te rekenen converteer je met Number():

const leeftijd = Number(document.getElementById('leeftijd').value);
const overTienJaar = leeftijd + 10;

Predict

Wat denk je dat in bericht staat als de gebruiker "Hallo" typt in het naam-veld en op de knop klikt?

const naam = document.getElementById('naam').value;
const bericht = 'Welkom, ' + naam + '!';

Klik hier voor het antwoord

bericht bevat de string 'Welkom, Hallo!'. De gebruiker typte "Hallo", dat wordt via .value opgehaald, en met + aan de begroeting geplakt.

Probeer het zelf!

Editor laden...

Waarom type="button" op de knop?

Een knop binnen een <form> verstuurt het formulier standaard (en herlaadt de pagina). Met type="button" voorkom je dat — de knop voert alleen het onclick-script uit.

Investigate

Experimenteer:

• Vul niets in en klik op de knop — wat zie je? (Tip: naam is dan een lege string '')
• Verwijder Number(...) rondom leeftijd en typ 5 in het leeftijd-veld — wat krijg je nu te zien? Waarom?
• Voeg een derde veld toe (bijv. hobby) en gebruik die ook in het bericht.
• Vervang (leeftijd + 10) door leeftijd + 10 (zonder haakjes) — wat verandert er aan de uitkomst? (Hint: kijk goed!)

Modify

Opdracht: Voeg een <select> toe met drie opties (bijv. "ochtend", "middag", "avond"). Pas het bericht aan zodat het bijvoorbeeld zegt: "Goedemorgen, Lisa!" als de gebruiker "ochtend" kiest.

Tip

Lees de gekozen optie uit met document.getElementById('moment').value. Gebruik if/else (uit Beslissingen) om de juiste begroeting te kiezen.

Antwoord

HTML toevoegen:

<label for="moment">Wanneer?</label>
<select id="moment">
  <option value="ochtend">Ochtend</option>
  <option value="middag">Middag</option>
  <option value="avond">Avond</option>
</select>

script.js aanpassen:

function begroet() {
  const naam = document.getElementById('naam').value;
  const moment = document.getElementById('moment').value;

  let groet;
  if (moment === 'ochtend') {
    groet = 'Goedemorgen';
  } else if (moment === 'middag') {
    groet = 'Goedemiddag';
  } else {
    groet = 'Goedenavond';
  }

  document.getElementById('uitvoer').textContent = groet + ', ' + naam + '!';
}

Make

Opdracht: Bouw een mini-rekenmachine. Twee number-velden voor twee getallen, en een knop "Bereken". Toon op de pagina de som, het verschil en het product van de twee getallen.

Tip

Vergeet niet Number(...) te gebruiken bij het ophalen van .value — anders plakt + de getallen aan elkaar in plaats van op te tellen.

Antwoord

HTML:

<input type="number" id="a">
<input type="number" id="b">
<button type="button" onclick="reken()">Bereken</button>
<p id="resultaat"></p>

script.js:

function reken() {
  const a = Number(document.getElementById('a').value);
  const b = Number(document.getElementById('b').value);

  const tekst = a + ' + ' + b + ' = ' + (a + b) + '\n' +
                a + ' - ' + b + ' = ' + (a - b) + '\n' +
                a + ' × ' + b + ' = ' + (a * b);

  document.getElementById('resultaat').textContent = tekst;
}

Voeg in CSS toe: #resultaat { white-space: pre-line; } om de regeleindes (\n) zichtbaar te maken.

Er gaat iets mis

Number-veld vergeten te converteren

const a = document.getElementById('a').value;  // string!
const b = document.getElementById('b').value;  // string!
console.log(a + b);  // '5' + '3' = '53'  niet 8!

.value is altijd een string, ook bij <input type="number">. Zonder Number(...) gaat + de waarden aan elkaar plakken in plaats van optellen. Wikkel altijd Number() om numerieke invoer:

const a = Number(document.getElementById('a').value);
const b = Number(document.getElementById('b').value);
console.log(a + b);  // 8  ✓

---

← Beslissingen (if/else)