Gebruikersinvoer opvragen

In HTML kunnen gebruikers informatie doorsturen met behulp van formuliervelden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Formuliervelden</title>
  <script type="text/javascript">
    function bereken() {
      // de invoer in het tekstveld met het id prijs lezen
      var prijs = document.getElementById("prijs").value;
      // de invoer in het tekstveld met het id aantal lezen
      var aantal = document.getElementById("aantal").value;
      // het resultaat in het tekstveld met het id resultaat plaatsen
      document.getElementById("resultaat").value = prijs * aantal;
    }
  </script>
</head>
<body>
  <p><label for="prijs">Prijs per stuk</label>
    <input type="text" name="prijs" id="prijs" onchange="bereken();" />
    x
    <label for="aantal">Aantal</label>
    <input type="text" name="aantal" id="aantal" onchange="bereken();" />
    =
    <input type="text" name="resultaat" id="resultaat" /></p>
</body>
</html>

Weergeven

De opdracht document.getElementById("prijs").value leest welke waarde de gebruikers in het tekstveld met het id prijs heeft ingetypt. Deze waarde kan in een variabele worden opgeslagen om dan verder gebruikt te worden. Deze opdracht kan je ook gebruiken om waarden in een tekstveld door JavaScript te laten invullen. M.a.w. bekijk deze opdracht als een variabele waarmee je waarden kunt opslaan in en lezen uit tekstvelden.

Waarden die in een tekstveld worden ingetypt zijn altijd strings (tekst). Ook als je alleen getallen intypt. Om met waarden uit een tekstveld te kunnen rekenen, moet je ze naar getallen omzetten. Een voorbeeld:

var prijs = parseFloat(document.getElementById("prijs").value);

Daarna ben je zeker dat de variabele prijs een getal bevat en geen tekst (string). Als je met gehele getallen zonder komma's werkt, gebruik je beter parseInt(tekst).

Let op het gebruik van onchange bij de tekstvelden. Bij het aanpassen van de waarde van het tekstveld wordt door onchange de functie bereken() uitgevoerd. De functie bereken wordt uitgevoerd na het intypen van een nieuwe waarde en het verlaten van het tekstveld (m.a.w. als je de cursor buiten het tekstveld plaatst).