JavaScript-skolan Formulär

1. Inledning

Man kan använda JavaScript för att verifiera, validera och anpassa ett formulär. Men det fungerar inte alltid friktionsfritt, eftersom formulärobjekten hanteras något olika i olika webbläsare.

Jag rekommenderar därför egentligen scripts som placeras på servern och då kanske framförallt ASP eller PHP. Här skall jag dock visa några enkla principer, som ni sedan kan gå vidare med.

2. Verifiera inmatning

Du vet redan hur man anropar ett formulärs olika delar. Det har jag visat på de tidigare sidorna. Syntaxen ser ut så här:

document.forms[0].value... osv   eller
document.form1.value...osv

De attribut man använder i Html finns också i JavaScript. Följande exempel visar detta:

Exempel 1

<script language="JavaScript">
<!--
function AccepteraAvtal() {
if (document.forms[0].Acceptera.checked) {
self.open("js_forms_x1a.html");
}
else {
alert("Du skall acceptera avtalet!");
}
}
-->
</script>

+

<form>
<input type="checkbox" name="Acceptera" value="Accepterat">Jag accepterar</input>
<input type="button" value="Skicka" onClick="AccepteraAvtal()" />
</form>

Titta på exemplet i praktiken >

Som du ser skapar funktionen ett villkor, där man kommer vidare endast om kryssrutan är ikryssad. Scriptet undersöker detta och väljer sedan antingen att skicka besökaren vidare eller ta fram en alert-ruta.

Exemplet är inte fullständigt eftersom besökaren inte skickas vidare på något bra sätt. Du ser ändå principerna för hur det går till.

3. Radioknappar

När det gäller radioknappar är det lite svårare. Alla knappar måste då nämligen ha samma namn.

Exempel 2

<script language="JavaScript">
<!--
function AngeBetyg() {
var form = document.forms[0];
for (var i=0; i<form.betyg.length; i++) {
if (form.betyg[i].checked) {
break
}
}
alert("Du valde betyget " + form.betyg[i].value);
}
-->
</script>

+

<form>
<input type="radio" name="betyg" value="Extremt bra" checked>Extremt bra</input><br />
<input type="radio" name="betyg" value="Mycket bra">Mycket bra</input><br />
<input type="radio" name="betyg" value="Bra">Bra</input><br />
<input type="radio" name="betyg" value="Normalt">Normalt</input><br />
<input type="radio" name="betyg" value="Ganska kasst">Ganska kasst</input><br />
<input type="radio" name="betyg" value="Totalt uruselt">Totalt uruselt</input><br /><br />
<input type="button" name="resultat" value="Ange ditt betyg" onClick="AngeBetyg()" />
</form>

Titta på exemplet i praktiken >

Scriptet använder en funktion med en inledande variabel, form. Dess värde sätts till formuläret på sidan. Nu kan man använda variabeln för att hänvisa till hela formulärobjektet.

For-satsen tar först reda på hur många förekomster av objekt med namnet betyg som finns. If-satsen undersöker vilket av dessa som är ikryssat.

Break används för att avbryta loopen då ett värde har hittats. Funktionen går då vidare till raden då alert-rutan skapas.

4. Navigationsmeny

En navigationsmeny skapas med elementet <select>, samt det underliggande <option>. Detta objekt är betydligt mer komplicerat än de jag hittills visat på denna sida. Anledningen är att ett objekt som skapats med <select> kan visas som antingen en rullgardinsmeny eller popup-meny, med envals- eller flervalsmöjligheter.

Ett av de vanligaste sätten att utnyttja objektet på är att göra en navigationsmeny. Jag redovisar här två olika scripts, för att du skall se hur man kan göra:

Exempel 3

<script language="JavaScript">
<!--
function Navigera() {
var list = document.forms[0].navigationslista;
location = list.options[list.selectedIndex].value;
}
-->
</script>

+

<form>
<select name="navigationslista" onChange="Navigera()">
<option value="js_forms_x3a.html">Sidan A</a></option>
<option value="js_forms_x3b.html">Sidan B</a></option>
<option value="js_forms_x3c.html">Sidan C</a></option>
<option value="js_forms_x3d.html">Sidan D</a></option>
</select>
</form>

Titta på exemplet i praktiken >

När något av valen i listan aktiveras (onChange) anropas funktionen "Navigera". I funktionen finns variabeln "list", som antar det värde som valts i navigationslistan.

Detta värde bestäms i sin tur i raden som börjar med objektet "location". Här hämtas värdet ur listan med kommandot options[]. Denna del letar upp motsvarande element i Html-koden och läser av de värden som finns där.

Med egenskapen selectedIndex letas det första värdet upp, men sedan returneras det valda alternativet med efterledet ".value".

Ett annat exempel ser ut så här:

Exempel 4

<script language="JavaScript">
function Navigera() {
var URL = document.forms[0].sida.options[document.forms[0] .sida.selectedIndex].value;
window.location.href = URL;
}
document.write('<form>');
document.write('<select name="sida" size="1">');
document.write('<option value="">Gå till...</option>');
document.write('<option value="js_forms_x4a.html">Sida A</option>');
document.write('<option value="js_forms_x4b.html">Sida B</option>');
document.write('<option value="js_forms_x4c.html">Sida C</option>');
document.write('<option value="js_forms_x4d.html">Sida D</option>');
document.write('</select>');
document.write('<input type="button" value="Ok!" onClick="javascript:Navigera()" />');
document.write('</form>');
</script>

Titta på exemplet i praktiken >

Som du ser använder jag här metoden "write()" och får scriptet att skriva ut Html-elementen direkt på sidan. Man kan lägga detta i en extern fil, t.ex med namnet "navigationsmeny.js". På så vis slipper man skriva koden på varje sida. Där man vill ha menyn placerar man följande kod:

<script language="JavaScript" src="navigationsmeny.js" />

5. Markera text automatiskt

För att markera eller fokuser en text automatiskt i ett formulär kan man göra så här:

Exempel 5

<form>
<input type="text" name="textfaelt1" value="Denna text &auml;r markerad" onClick="document.forms[0].textfaelt1.select()" / >
<input type="text" name="textfaelt2" value="Ej markerad" / >
<input type="text" name="textfaelt3" value="Ej markerad" / >
</form>

Titta på exemplet i praktiken >

Som du ser använder man metoden select() för att åstadkomma markeringen av texten. Metoden lämpar sig också för textrutor och andra textobjekt. Den går att använda för att göra besökaren uppmärksam på en viss text, underlätta kopieringen av en text för besökaren, osv.

6. Validera ett formulär

I denna genomgång tänkte jag avsluta med ett exempel på hur man kan kontrollera att ett formulär är ifyllt innan det skickas. Scriptet innehåller nyckelordet this, som du redan stiftat bekantskap med och som skrivs så här:

<form onSubmit="return Validera(this)">

(this) anropar här funktionen, där motsvarande text står:

function Validera(form) {

Här ersätter man alltså document.forms[0] med ett nyckelord, som alltså används som en genväg:

Exempel 6

<script language="JavaScript">
<!--
function Validera(form) {
for (var i=0; i<form.elements.length; i++) {
if (form.elements[i].value == "") {
alert("Fyll i alla fält!")
return false
}
}
return true
}
-->
</script>

+

<form onSubmit="return Validera(this)">
Fyll i dina uppgifter:<br />
Förnamn: <input type="text" name="fornamn" / ><br />
Efternamn: <input type="text" name="efternamn" / ><br />
E-postadress: <input type="text" name="epost" / ><br />
<input type="submit" value="Skicka!" />
</form>

Titta på exemplet i praktiken >

En annan knepig detalj här är att onSubmit står i <form>-elementet och inte i elementet för skicka-knappen. Förklaringen jag har fått är att onSubmit fungerar bättre i <form> då man vill kunna validera hela formuläret.

Övriga scriptet borde du känna till vid det här laget. For-satsen säger att för varje element i formuläret så... If-satsen säger att om värdet är tomt (inget ifyllt) så skall alert-rutan visas.

"Return false" gör att besökaren får börja om. "Return true" gör så besökaren kommer vidare, då alla fält är ifyllda.

7. Övningar

Övning 1
Utgå ifrån Exempel 1 och skapa ett formulär där man kommer vidare endast om kryssrutan är ikryssad. Går detta att göra med en radioknapp också? Kontrollera!

Övning 2
I Exempel 2 visade jag hur man kan få ett formulär att returnera det val besökaren gjort. Försök göra ett likadant formulär!

Övning 3
I Exempel 3 och 4 visade jag två olika sätt att göra en navigationsmeny. Studera båda scripten och fundera över hur de skiljer sig och vilken som är mest användbar!

Övning 4
Exempel 5 visar hur man kan markera texten automatiskt. Pröva dig fram och se hur detta kommando går att utnyttja, både för delar av ett formulär som för andra objekt, t.ex vanlig text!

Övning 5
Exempel 6 visade hur man kan validera ett formulär. Pröva att göra ett likadant. Försök också validera radioknappar och andra formulärobjekt!