DHTML

Ett dynamiskt formulär - 3

Funktionen showCity har som uppgift att kolla vad argumentet är för något och ta beslut om vad som ska göras härnäst. Funktionen ser ut såhär :


function showCity(area)

{

	if (area != "none")

	{

		if ((area == "Gotland") || (area == "Utlandet"))

		{

			alert("Nej " + area + " är inte alls rätt");

		}

	

		else if (area == "Härjedalen")

		{

			document.getElementById('city').style.display='';

		}

	}

}



Vad den gör är att först kolla så att något verkligt alternativ är valt i listan. T ex om användaren har klickat på alternativet "--Välj område--" skickas bara strängen "none" och inget mer händer. Men om strängen area är något annat finns ytterligare två alternativ att ta ställning till. Först görs en jämförelse om användaren gjorde något av valen Gotland eller Utlandet.


if ((area == "Gotland") || (area == "Utlandet"))

	{

		alert("Nej " + area + " är inte alls rätt");

	}

Om någon av dessa valdes kommer JavaScript-funktionen alert() att skriva ut en sträng som talar om att det valda området inte var rätt. Den textsträng som skrivs ut är sammansatt av vanlig text och värdet på det argument som skickades in. Plustecknet betyder alltså att ett antal olika delar ska sättas ihop till en större text.

"Nej " + area + " är inte alls rätt"

Användaren får på så sätt reda på vilket val som gjordes och att det var fel.

Den andra grenen i if-satsen kollar om valet Härjedalen gjordes.


else if (area == "Härjedalen")

	{

		document.getElementById('city').style.display='';

	}

Om så är fallet ska vi visa den andra av de två SELECT-elementen. Det andra SELECT-elementet utgör alltså den lista med orter som finns att välja bland i området Härjedalen. Givetvis kunde vi ha gjort samma sak för både Gotland och Utlandet, men för att illustrera räcker det med ett område att välja orter på.

Vi använder oss som flera gånger innan av satsen som ser ut som :

document.getElementById('city').style.display='';

och som har som uppgift visa elementet med id city.

Som du säkert redan har listat ut betyder detta att från dokumentet ta fram det element som har id=city och sätta dess display-attribut till "" för att visas. Den undre listan kommer alltså fram.