H8: FORMULIEREN In dit hoofdstuk komt het "form"-object aan de orde: we zullen zien hoe we JavaScript kunnen gebruiken voor het manipuleren en valideren van de gegevens die een eindgebruiker invult in een HTML-formulier. FORM Vorige keer zagen we dat het object "document" verschillende eigenschappen of properties heeft die zelf ook weer objecten zijn. Van die eigenschappen is "form" wel een van de belangrijkste. Dit JavaScript-object, dat overeen komt met een invulformulier in HTML, kent diverse eigenschappen en twee methoden. Een document kan verschillende formulieren bevatten. We moeten daarom een manier hebben om naar een specifiek formulier te verwijzen. Normalerwijze gebruiken we daarvoor de naam van dat formulier. In HTML schrijven we bijvoorbeeld: <FORM NAME="klant"> en in JavaScript kunnen we vervolgens met document.klant naar dit formulier verwijzen. Dit is, zoals gezegd, de schrijfwijze die we in de meeste gevallen zullen gebruiken. Er is echter een alternatief: we mogen ook gebruik maken van het document.forms-array dat een element bevat voor elk formulier in het document. Bevat het document slechts een enkel formulier, dan kunnen we daar naar verwijzen door middel van document.forms[0] (we tellen bij arrays immers vanaf nul). Deze schrijfwijze kunnen we bijvoorbeeld gebruiken om met behulp van een lus alle formulieren in het document te verwerken; het aantal formulieren in het document kunnen we daarbij vinden met behulp van de read-only eigenschap document.forms.length. Als een formulier geen naam heeft, is het forms-array de enige manier om ernaar te verwijzen. Het is echter verstandig om elk formulier een eigen naam te geven; dit wordt dan de waarde van de eigenschap name. Deze eigenschap wordt uiteraard vooral gebruikt in combinatie met het formsarray: document.forms[0].name heeft in ons voorbeeld de waarde "klant". ELEMENTEN Een formulier bevat een aantal elementen, bijvoorbeeld: twee invoervelden en een knop om de inhoud van het formulier te versturen. Deze elementen vinden we terug in een andere eigenschap van het form-object: het elements-array. Als het eerste element van het formulier bijvoorbeeld de woonplaats van de klant bevat, kunnen we daar naar verwijzen door middel van document.klant.elements[0]. Het is echter aan te raden om ook aan alle elementen binnen een formulier een naam toe te kennen. In dat geval kunnen we het invoerveld ook benaderen met behulp van document.klant.woonplaats. 1
Ook het elements-array gebruiken we vooral in combinatie met een lus, bijvoorbeeld om te kijken of alle verplichte velden zijn ingevoerd; zo vinden we het aantal elementen in formulier klant met document.klant.elements.length. Andere eigenschappen van het object form zijn: action (de URL waar de inhoud van het formulier naar wordt opgestuurd), method ("get" of "post") en target (de naam van het frame waarin, na het opsturen van het formulier, de resultaten moeten worden getoond; er zijn enkele speciale namen als "_top" en "_blank" die we nader zullen bekijken in het volgende hoofdstuk over frames en navigatie). Het form-object kent ook twee methoden: submit en reset. De werking van deze methoden komt overeen met die van de gelijknamige knoppen: met document.klant.submit() wordt de inhoud van het formulier verstuurd, en met document.klant.reset() krijgen alle elementen van het formulier weer hun beginwaarde, waardoor eventuele wijzigingen van de gebruiker ongedaan worden gemaakt. Deze methoden geven ons bijvoorbeeld de mogelijkheid om een formulier alleen dan op te sturen als aan bepaalde voorwaarden wordt voldaan; gebruiken we een "gewone" submit-knop zonder JavaScript, dan wordt het formulier altijd verstuurd, en hebben we geen controlemogelijkheid. 2
KNOPPEN We hadden het zojuist al over submit- en reset-knoppen. Deze objecten kunnen deel uitmaken van een formulier, en we kunnen er naar verwijzen met behulp van het elements-array. Indien we in HTML een naam hebben opgegeven voor een knop, dan is dat de waarde van zijn eigenschap "name", en kunnen we ook daarmee naar de knop verwijzen. Als we binnen het formulier "klant" bijvoorbeeld een knop hebben gedefinieerd door middel van <INPUT TYPE="submit" NAME="verstuur">, dan kunnen we in JavaScript naar die knop verwijzen met document.klant.verstuur. Andere eigenschappen van submit- en reset-knoppen zijn type (respectievelijk "submit" en "reset") en value (het opschrift van de knop). De eigenschap "type" is "read-only", dat wil zeggen dat we die alleen kunnen opvragen maar er geen nieuwe waarde aan kunnen toekennen; de andere eigenschappen kunnen we zowel opvragen als wijzigen. De methoden van een knop zijn focus en blur, waarmee een knop focus krijgt of juist verliest, en click, waarmee we kunnen simuleren dat de knop met de muis wordt aangeklikt. We kunnen het formulier "klant" uit ons voorbeeld dus op verschillende manieren versturen met behulp van JavaScript. We kunnen direct de methode submit van het formulier aanroepen: document.klant.submit() maar we kunnen ook de methode click van zijn submit-knop aanroepen: document.klant.verstuur.click(). Naast de submit-knop en de reset-knop is er nog een derde type, met dezelfde eigenschappen en methoden: de button, in HTML aangemaakt door middel van <INPUT TYPE="button">. Buttonobjecten hebben geen "ingebouwd" gedrag; we zullen zelf moeten aangeven wat er moet gebeuren als de gebruiker ze aanklikt. Daartoe maken we gebruik van "events". Als de gebruiker op een knop drukt, of dat nu een submit-knop is, een reset-knop of een button, dan signaleert JavaScript dat er een speciale gebeurtenis optreedt: een "click-event". Met een zogenaamde "event handler" kunnen we op die gebeurtenis reageren en bijvoorbeeld een berekening uitvoeren. Niet alleen knoppen, maar ook allerlei andere objecten kunnen JavaScriptevents genereren. Over events en event handlers zullen we het uitgebreid hebben in het volgende hoofdstuk van deze cursus. 3
INVOERVELDEN Natuurlijk kan een HTML-formulier veel meer elementen bevatten dan alleen maar knoppen. Allereerst zijn daar de velden waarmee een tekstwaarde kan worden ingevoerd: het "gewone" textveld, het password dat bij invoer alleen maar sterretjes toont, en de textarea voor het invoeren van teksten van meer dan een regel. Ook hebben we de beschikking over het hidden veld dat wordt gebruikt om waarden door te geven van het ene scherm naar het andere. Al deze objecten kennen, naast de read-only eigenschappen name en type, de eigenschap "value" die in JavaScript zowel opgevraagd als gewijzigd kan worden. We kunnen deze eigenschap gebruiken om te controleren of de gebruiker wel een geldige waarde heeft ingegeven voor een bepaald veld. Bij wijze van voorbeeld bekijken we een functie die controleert of er in een formulier een e-mailadres is ingevuld en zo ja, of dat aan enkele "minimumvereisten" voldoet: function CheckEmail() VB = '\nvoorbeeld: demonaam@demoadres.nl \n\nopnieuw a.u.b.'; N = true; if (document.access.email.value == '') N = false; alert('geef a.u.b. uw e-mail adres in'); document.access.email.focus(); else if (document.access.email.value.indexof('@') == -1) N = false; Z = 'Een e-mail adres moet een "apenstaartje" (@) bevatten.'; alert(z + VB); document.access.email.focus(); if (N) if (document.access.email.value.indexof('.') == -1) N = false; Z = 'Een e-mail adres moet een punt bevatten.'; alert(z + VB); document.access.email.focus(); return N; 4
De HTML-pagina bevat dus kennelijk een formulier met de naam "access", met een invoerveld dat "email" heet. De functie gaat na of er voor dat veld een waarde is ingevuld, en zo ja, of die waarde een "@"-teken en een punt bevat. (Natuurlijk is deze controle niet volledig, maar de meest voorkomende fouten worden ermee gesignaleerd.) Als de ingevulde waarde niet aan de eisen voldoet, dan wordt er een foutmelding getoond. Vervolgens krijgt het veld de focus (door het aanroepen van de gelijknamige methode van het invoerveld), zodat de gebruiker de invoer direct kan corrigeren. Tot de "familie" van invoervelden behoort ook het element FileUpload, dat alleen door nieuwere browsers wordt ondersteund. Indien we een dergelijk element in onze pagina opnemen, dan wordt er een invoerveld getoond met daarnaast een browse-knop. De gebruiker kan handmatig het volledige pad van een bestand op de harde schijf ingeven, of met behulp van de browse-knop een bestand selecteren. Wordt het formulier vervolgens verstuurd, dan wordt het desbetreffende bestand meegestuurd. Ook dit object heeft een eigenschap "value", maar deze is read-only: we kunnen dus niet programmatisch de naam van het te versturen bestand opgeven. (Gelukkig maar, want dat zou een ernstig beveiligingslek zijn...) Een laatste belangrijke eigenschap van invoervelden is defaultvalue. Dit is de waarde die het veld krijgt als het formulier wordt gereset, in HTML aangegeven door middel van het VALUE-attribuut. Deze eigenschap is read-only. Invoervelden kennen (net als knoppen) de methoden focus en blur; daarnaast hebben ze een methode "select", waarmee de door het veld getoonde tekst kan worden geselecteerd. 5
ANDERE ELEMENTEN Ook de andere elementen die op een HTML-formulier voor kunnen komen (checkbox, radio-button en select-element) zijn vanuit JavaScript benaderbaar. De checkbox en de radiobutton hebben beide een eigenschap "checked" met als mogelijke waarden true en false. We kunnen de waarde van deze eigenschap opvragen om na te gaan of het element geselecteerd is. Ook kunnen we aan checked de waarde true toekennen om het element te selecteren, en tenslotte kunnen we er bij een checkbox de waarde false aan toekennen om het element te deselecteren. Bij een radiobutton kan dat laatste niet: we kunnen een bepaalde radiobutton alleen deselecteren door een andere radiobutton uit dezelfde groep te selecteren. Radiobuttons komen immers voor in groepen; ze worden gebruikt om een keuze te maken uit enkele mogelijkheden die elkaar wederzijds uitsluiten. In HTML geven we aan radiobuttons die tot dezelfde groep behoren, steeds dezelfde NAME maar een andere VALUE. Dit zou in JavaScript een probleem kunnen geven: hoe kunnen we naar een specifieke radiobutton verwijzen als alle radiobuttons uit die groep dezelfde naam hebben? Het antwoord is: door de radiobuttons uit de groep te benaderen als een array! Stel dat formulier "klant" twee radiobuttons bevat met de naam "niveau" (en waarden "goud" en "zilver"), dan kunnen we ernaar verwijzen met behulp van respectievelijk document.klant.niveau[0] en document.klant.niveau[1]. Het aantal elementen in het array (en dus het aantal radiobuttons in de groep) vinden we met document.klant.niveau.length Checkboxen en radiobuttons hebben beide ook een read-only eigenschap defaultchecked waarmee we kunnen nagaan of het element initieel geselecteerd was; dat is het geval als we in de HTML voor dat element het attribuut CHECKED hebben opgegeven. Tenslotte kunnen we in onze formulieren nog gebruik maken van een select-element. Zo'n element toont, in een drop-down menu of in een listbox (afhankelijk van het HTML-attribuut SIZE), een aantal opties. Hiervan kan de gebruiker er een of meer van selecteren, afhankelijk van het HTML-attribuut MULTIPLE. De opties waaruit de gebruiker kan kiezen, zijn opgenomen in het array options, een object dat zelf een eigenschap is van het select-object. Het aantal beschikbare opties vinden we met behulp van de read-only eigenschap length. Een belangrijke eigenschap van het select-object is selectedindex: daarmee kunnen we nagaan welke optie op dit moment geselecteerd is. Deze eigenschap was read-only in JavaScript 1.0, maar vanaf versie 1.1 kunnen we er ook een waarde aan toekennen en zo de bijbehorende optie selecteren. Als het formulier klant uit ons voorbeeld een select-object met de naam "nationaliteit" bevat, dan kunnen we de tweede optie daarvan selecteren door middel van document.klant.nationaliteit.selectedindex = 1. 6
We kunnen ook op het scherm tonen welke waarde de op dit moment geselecteerde optie heeft, met de opdracht: document.write(document.klant.nationaliteit.options [document.klant.nationaliteit.selectedindex].value). We bepalen dus eerst met eigenschap selectedindex welke optie geselecteerd is. Vervolgens gebruiken we de gevonden waarde als index in het options-array om naar die optie te verwijzen. Tenslotte vinden we met value, een eigenschap van het options-array, de waarde die voor dit element wordt verstuurd als de gebruiker op de submit-knop van het formulier drukt. In plaats van value kunnen we ook text gebruiken, en in dat geval krijgen we de tekst die in het dropdown menu of in de listbox op het scherm wordt getoond. Ook deze eigenschap van het optionsarray was read-only in JavasScript 1.0, maar read/write vanaf versie 1.1. Als we voor het select-element het HTML-attribuut MULTIPLE hebben opgegeven, is het niet zinvol om selectedindex te gebruiken: er kan immers meer dan een optie geselecteerd zijn. In dat geval gebruiken we een lus om per optie na te gaan of deze "selected" is. Deze eigenschap van het optionsarray kunnen we opvragen, maar we kunnen er ook een waarde aan toekennen ("true" of "false"), en zo de bijbehorende optie selecteren of deselecteren. CONCLUSIE We hebben gezien hoe we in JavaScript de elementen van een HTML-formulier kunnen benaderen. In het volgende hoofdstuk zullen we het hebben over "events": gebeurtenissen die er voor kunnen zorgen dat een stuk JavaScript wordt uitgevoerd. 7
OEFENINGEN FORMULIEREN OEFENING 1: TUTORIAL Werk volgende tutorial uit: http://www.sitemasters.be/tutorials/3/1/306/javascript/werken_met_formulieren OEFENING 2: TAFEL VAN VERMENIGVULDIGING VOOR WILLEKEURIG GETAL Maak een html pagina waarbij je met hulp van javascript en forms de tafel van vermenigvuldiging voor een willekeurig getal kunt uitvoeren. (tot 5 keer het getal). OEFENING 3: CHINEES BESTELLEN Maak een meerkeuze lijstje waarbij je minstens 10 verschillende opties hebt om te kiezen uit je chinees menu. De gebruiker heeft de mogelijkheid om meerdere opties te selecteren ( als extra maar niet verplicht: minstens 1) en kan dan kiezen uit bestellen en reset. Reset zorgt ervoor dat alle vinkjes weg zijn en bij het klikken op bestellen krijg je een popup waarbij de gebruiker een laaste keer moet bevestigen voordat de aankoop zal doorgaan. OEFENING 4: PRIJS TOEVOEGEN Pas oefening 3 aan zodat voor elk gerecht de prijs zichtbaar is en het correct totaal wordt gegeven bij aankoop. 8