JavaScript — Introduktion genom exempel

4.1 Element och händelser i formulär

I formulär kan man referera till de olika elementen med hjälp av deras name-attribut. Finns det flera element med samma namn, blir de en array och man indexerar dem i referenserna. Det finns ett antal olika element (input med olika type-attribut, select, och textarea). Alla dessa har olika egenskaper för att komma åt innehåll och vad som är valt. De har också olika händelser, t.ex. att ett textfält är i fokus då användaren klickat i det. Detta exempel illustrerar en del händelser och hur man avläser elementens innehåll. Exemplet är uppdelat i tre delar:

1. Exempel på olika element för input och val samt hur man avläser dem.
2. Exempel på olika händelser som kan inträffa på formulärets element.
3. Ett formulär för en lånekalkyl, där olika input-element och händelser används.

Sammanfattning

• Referera till element i formuläret:
  • För att referera till elementen i ett formulär, tar man först fram en referens till form-elementet, t.ex. med hjälp av querySelector(). Därefter kan man använda punktnotation och de namn som finns i elementens name-attribut. Har man t.ex. <input name="myField" ...> kan man skriva formElem.myField.value, för att först referera till variabeln med formuläret, sedan namnet på input-taggen och sedan egenskapen (i detta fall value) som man vill komma åt.
  • Om flera element har samma namn, blir de en array. I referensen får man då indexera dem, t.ex. formElm.myField[i].value.
• Avläsa elementens innehåll och val:
  • För komma åt innehållet i ett textfält (även input-taggar med type satt till email, date, etc. samt textarea-element) använder man egenskapen value. Även om det inte finns något value-attribut i HTML-koden, kan man i JavaScript avläsa value. Man kan också lägga in nytt innehåll i value.
  • Även för en meny kan man använda value, för att avläsa det val användaren gjort. Man refererar till select-elementet och avläser value och får då innehållet i valt option-element.
  • För en meny kan man också använda selectedIndex, för att få index till valt option-element. Det går också lägga in ett nytt värde i selectedIndex, för att ställa in menyn på det alternativet. Lägger man in 0, visas det första alternativet.
  • För kryssrutor och radioknapper (input med type="checkbox" eller type="radio") använder man egenskapen checked, för att avgöra vilken som är vald. Man går då igenom dem i en loop och avläser checked för var och ett av elementen.
• Händelser för elementen:
  • För textfält (alla varianter) inträffar händelsen focus, då användaren kommer in i det (t.ex. genom att klicka i det eller gå till det med tab-tangenten). När man lämnar fältet, inträffar händelsen blur.
  • För menyer brukar man använda händelsen change, som kopplas till select-elementet. Händelsen inträffar då det görs ett nytt val i menyn.
  • För ett skjutreglage kan man också använda change, som inträffar när man släpper reglaget. Vill man känna av en händelse medan man drar i reglaget, använder man istället händelsen input.
  • Då ett formulär skickas, inträffar händelsen submit. Denna händelse inträffar innan formuläret skickats, så man kan fånga upp den och göra en kontroll av formuläret. Vill man sedan förhindra att formuläret skickas, kan man använda e.preventDefault().

Egna övningar

Här följer ett förslag på några egna övningar. Öppna filen test.html och test.js och utför följande:

• Lägg till händelsehanterare på de båda textfälten, så att funktionen selectText anropas på händelsen focus och funktionen checkText anropas på händelsen blur.
• Lägg också en händelsehanterare på knappen calcBtn, så att funktionen calculateArea anropas på händelsen click.
• I funktionen calculateArea avläser du de båda textfälten och sparar deras värden i variablerna a och b.
• Lägg också in if-satser för att kontrollera vilken av radioknapparna som är vald. I de olika if-satserna lägger du in de olika raderna för beräkning av area.