Startsidan

Java och applets

Ajax

XML oxh XSLT

Forum

Gästbok

Våra tjänster

Javascript

• Javascript i dag -inledning
• Dom - Document object model
• Dom - Hemliga länkar
• Formulärkomponenter
• Morphning av bilder
• HTML 5

Animeringar

• Textvågen

Javascript och stilar

• Kalendern

Formulärkomponenter

På den här sidan kommer jag att visa en del exempel på hur man kommer åt och manilpulerar innehållet i diverse formulärkomponenter. Låt oss börja med de gamla kära rullgardinsmenyerna.

En enkel listruta

Vilken smak önskas på glassen?

Vanilj Chocklad Citron Hallon Jordgubb

Att skapa en listruta i html är ganska enkelt. Instruktionen heter select och kan ha ett flertal attribut, vilket vi ska kika lite met på längre ner. Det enda attributet, som är angivet i detta exempel är händelsehanteraren "onchange". I en select kan man ha valfritt antal options.
En option har attributet value, vilket är det värde, som kommer in till servern, om man nu skickar innehållet till en webbserver.

<select onchange="displaySimple(this);">
<option value="1">Vanilj</option>
<option value="2">Chocklad</option>
<option value="3">Citron</option>
<option value="4">Hallon</option>
<option value="5">Jordgubb</option>
</select>
			

Du kan se att listrutan skickar med sig själv som argument till funktionen displaySimple. this är således ett nyckelord i javascript, och för den vane programmerare är detta ingenting nytt. Det är ett ord, som förekommer i ett flertal programmeringsspråk, och betyder "den här", "den här instansen" o.s.v.
I funktionen displaySimple används argumentet lista till att komma åe de olika attributens värden.

<script>

	function displaySimple(lista)
	{
		str="Du valde listindex: "+lista.selectedIndex;
		str+="<brt>Denna lispost har värdet "+lista.options[lista.selectedIndex].value;
		str+="<brt>Det synbara värdet är "+lista.options[lista.selectedIndex].text;
		document.getElementById("simple").innerHTML=str;
	}
					
</script>

En flervalslista

En flervalslista är en lista, där du som användare kan välja fler alternativ. Du gör det genom att hålla tangenten[CTRL].

Vilken smak önskas på glassen?

Vanilj Chocklad Citron Hallon Jordgubb

Då ska vi väl ta och kika på html-koden för flervalslistan också. Den enda skillnaden består i att select har tilldelats ytterligare två attribut, multiple och size. Du kanske tycker att multiple="multiple" ser knepigt ut, jag håller med.
Multiple är ett av alla de attribut, som kan förekomma på en html-sida, där man inte behöver ange något värde. Problemet är att i xhtml, som är en xml-grundad standard, så måste alla attribut ha värden. Därför brukar man fuska till värdetilldelningen på det sätt, som du ser i koden här. Jag prövade med multiple=true och det fungerade lika bra.

<select class="textfield" multiple="multiple" size="5" onchange="displayMulti(this);">
<option value="1">Vanilj</option>
<option value="2">Chocklad</option>
<option value="3">Citron</option>
<option value="4">Hallon</option>
<option value="5">Jordgubb</option>
</select>
	

Koden i funktionen displayMulti sklijer sig väldigt lite från dispaySimple. Sak samma sker, det är bara att det sker för varje vald listpost. I en forloop loopas samtliga listposter igenom och är posten vald, så hämtas informationen.
Attributet som ger information om postens status, vald eller inte vald, heter selected.

<script>
function displayMulti(lista)
{
str="";
	for(i=0;i<lista.length;i++)
	{
		if(lista.options[i].selected)
		{
		str+="Du valde listindex: "+i;
		str+="<br />Denna lispost har värdet "+lista.options[i].value;
		str+="<br />Det synbara värdet är "+lista.options[i].text+"<hr/>";
		}
	}
document.getElementById("multiple").innerHTML=str;
}
					
</script>

Dynamiska listor

Med dynamiska listor avses listor, där du som användare kan lägga till och ta bort listposter. Jag tycker för min del, att det är fantastiskt att det är genomförbart.

	Morgan Augustsson

Ja, vi skulle väl bjuda på lite kod också

<table width="60%" border="0">
<tr>
	<td style="width:50%;"><input type="button" class="knapp" value="Lägg till post" onclick="addPost();" /></td>
	<td style="width:50%;"><input type="text" class="textfield" id="post" /></td>
</tr>
<tr>
	<td>   <input type="button" class="knapp" value="Ta bort markerad post" onclick="removePost();" /> </td>
	<td>
		<select name="listan" id="listan" class="textfield">
		<option value="1">Morgan Augustsson</option>
		</select>
	</td>
</tr>
</table>

Javascriptsfunktionerna

function addPost()
{
lista = document.getElementById("listan");
value=document.getElementById("post").value;
var option = document.createElement("option");
	try
	{
	senaste_value = lista.options[lista.length-1].value;
	}
	catch(err)
	{
		senaste_value=1;
	}
nytt_value=Number(senaste_value)+1;
option.value = nytt_value;
option.text = value;
	 if(document.all && !window.opera)
  	{
		lista.add(option);
	}
 	else
  	{
		lista.add(option, null);
	}
document.getElementById("post").value="";
}


function removePost()
{
lista = document.getElementById("listan");
	try
	{
	index = lista.selectedIndex;
	lista.remove(index);
	}
	catch(err)
	{
		alert("Slut på poster!" );
	}
}