Introduktion till JavaScript

Introduktion till JavaScript
Del 7

Indata från formulär är väldigt viktiga för vissa web-sidor. Indatat skickas ofta tillbaka till severn. JavaScript har funktionalitet för att giltighetskontrollera indata från formulär innan det skickas till servern. Först ska jag visa hur man kan giltighetskontrollera formulär, sedan ska vi ta en titt på möjligheterna att skicka tillbaka information med JavaScript eller HTML.

Först vill vi skapa ett enkelt script. HTML-sidan ska innehålla två text-element. Besökaren ska fylla i sitt namn i det ena och en e-postadress i det andra elementet. Du kan skriva vad som helst i elementen och sen trycka på knappen. Pröva sen att trycka på knappen utan att skriva någonting.

Enter your name:

Enter your e-mail address:

När det gäller det första elementet kommer du att få ett felmeddelande när du inte skriver någonting. Vilket indata som helst anses vara giltigt indata. Detta hindrar förstås inte besökaren från att skriva ett felaktigt namn. Internet-läsaren accepterar till och med nummer, så om du skriver '17' svarar den 'Hi 17!'.
Det andra formuläret är lite mer sofistikerat. Prova genom att skriva en enkel sträng - ditt namn till exempel. Det kommer inte att fungera (om du inte har ett @ i ditt namn...). Kriteriet för att acceptera indatat som en giltig e-postadress är ett @. Ett ensamt @ räcker, men det är verkligen inte särskillt meningsfullt. Varje e-postadress innehåller ett @, så det verkar lämpligt att kolla efter ett @ här.

Hur ser då scriptet för giltighetskontroll av de två formulär-elementen ut? Här är det:

<html>
<head>
<script language="JavaScript">
<!-- Hide

function test1(form) {
  if (form.text1.value == "")
    alert("Please enter a string!")
  else { 
   alert("Hi "+form.text1.value+"! Form input ok!");
  }
}

function test2(form) {
  if (form.text2.value == "" || 
      form.text2.value.indexOf('@', 0) == -1) 
        alert("No valid e-mail address!");
  else alert("OK!");
}
// -->
</script>
</head>

<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Test Input" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Test Input" onClick="test2(this.form)">
</body>

Titta först på HTML-koden i body-sektionen. Vi skapar två text-element och två knappar. Knapparna anropar funktionerna test1(...) eller test2(...) beroende på vilken knapp man trycker på. Vi ger this.form till funktionerna för att kunna adressera rätt element i funktionerna senare.
Funktionen test1(form) testar om strängen är tom. Det görs med if (form.text1.value == "")... .'form' är variablen som tar emot värdet från 'this.form' i funktionsanropet. Vi kan få värdet från indata-elementet genom att använda 'value' i kombination med form.text1. För att kolla om strängen är tom jämför vi den med "". Om indata-strängen är lika med "" har inget data matats in. Användaren får ett felmeddelande. Om någonting har skrivits in kommer användaren att få ett ok.
Problemet här, är att användaren kanske bara skriver in blanksteg. Det ses som giltigt indata! Om du vill kan du förståss göra kontroller för dessa möjligheter och sedan utesluta dem. Det är ganska enkelt med den information som finns här.
Titta nu på funktionen test2(form). Den här funktionen jämför också indata-strängen med den tomma strängen "", för att försäkra sig om att någonting har matats in, men vi har lagt till någonting till if-satsen. || kallas för OR-operatorn. Du fick lära dig den i del 6 av den här introduktionen.
If-satsen kontrollerar om antingen den första eller den andra jämförelsen är sann. Om åtminstone en av dem är sann blir hela if-satsen sann och efterföljande kommando kommer att utföras. Det betyder att du får ett felmeddelande antingen om strängen är tom eller om den inte innehåller ett @. Den andra operatorn i if-satsen ser efter om indata-strängen innehåller ett @.

Vilka olika möjligheter finns det att skicka innehållet i ett formulär? Det enklaste sättet är att skicka formulär-innehållet med e-post. Det är den metod vi ska titta lite närmare på. Om du vill ha feedback utan e-post och vill att servern ska ta hand om indatat automatiskt måste du använda CGI. Du skulle t ex behöva CGI om du du ville göra en sök-maskin som Yahoo där användaren får ett svar direkt efter att fylla i och skicka formuläret. Han behöver inte vänta på att de som har hand om servern ska läsa indatat och leta efter den sökta informationen. JavaScript har inte funktionaliteten att kunna göra såna saker. Inte heller om du vill göra en gästbok kan du få servern att automatiskt lägga till information i en befintlig HTML-sida med JavaScript. Bara CGI kan göra det för närvarande. Du kan förstås skapa en gästbok där besökarna svarar via e-post. Du måste i och för sig skriva in informationen manuellt. Det är ok om du inte räknar med att få 1000 svar om dagen.
Det här scriptet är ren HTML. Det behövs inget JavaScript! Bara, förstås, om du vill kolla indatat innan formuläret skickas behöver du använda JavaScript. Jag måste tillägga att mailto-funktionen inte fungerar i alla läsare, men de nyare stöder det.

<FORM METHOD=POST ACTION="mailto:your_email@goes.here">
<H3>Do you like this page?</H3>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="1">Not at all.<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>Waste of time.<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="3">Worst site of the Net.<BR>
  <INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send">
</FORM>

Du får feedback via e-post om du gör så här. Det enda problemet är att du kommer att få ett e-postmeddelande som kan verka väldigt kryptiskt vid första anblicken. Ibland är alla blanksteg ersatta av '+' och ibland av '%20'. Det+kan+se+ut+så+här. Jag tror att det finns en del program ute på nätet som gör om de mottagna mailen till ett trevligare format.

Det finns en till trevlig grej som kan göra dina formulär-element lite mer användar-vänliga. Du kan tala om vilka element som ska vara aktiverade från början, eller aktivera den del av ett formulär där användaren har givit felaktigt indata. Det betyder att internet-läsaren kommer att placera markören i det formulär-fältet så att användaren slipper klicka på fältet innan han skriver någonting. Du kan göra detta med följande script:

function setfocus() {
        document.first.text1.focus();
        return;
}

Det aktiverar det första text-fältet i scriptet jag visade här ovan. Du måste ange hela formulärets namn, här kallat first och sedan namnet på formulär-elementet, här kallat text1. Om du vill aktivera det här elementet när sidan öppnas kan du lägga till egenskapen onLoad till <body>-koden. Det kan se ut så här:

<body onLoad="setfocus()">

Index - Del 1 - Del 2 - Del 3 - Del 4 - Del 5 - Del 6

Översatt till svenska av Niklas Johansson 1996