Exsempel 1
Den grunnleggende strukturen når vi ønsker å sende data til
tjeneren er at vi formulerer en form med input-felter og en submit-knapp.
Formen skal ha en action-property og en method-property.
F.eks. slik:
<form action="http://www.it.hiof.no/~borres/cgi-bin/demo/std.py"
method="get">
<div>
Melding: <br/><input type="text" name="message" size="5"/>
<input type="submit" value="Send"/>
</div>
</form>
Innholdet i form-elementet går ubetinget til tjeneren.
Hva hvis vi ønsker å gjøre noe med disse dataene før de
sendes ? Vi kan bryte automatikken mellom et submit-klikk
og en action ved å plukke opp museklikket på submit.knappen.
F.eks. slik:
Exsempel 2
<form action="http://www.it.hiof.no/~borres/cgi-bin/demo/std.py"
method="get">
<div>
Melding: <br/><input type="text" name="message" size="5"/>
<input type="submit" onclick="myFunction()" value="Send"/>
</div>
</form>
myScript er et Javascript-kode vi skriver. f.eks. slik:
function myFunction(){
alert('hello');
}
Vi modifiserer HTML-koden slik at vi eksplisitt returnerer en verdi fra
funksjonen vår, og vi sender med den aktuelle formen vi er inne i som parameter
Exsempel 3
<form action="http://www.it.hiof.no/~borres/cgi-bin/demo/std.py"
method="get">
<div>
Melding: <br/><input type="text" name="message" size="5"/>
<input type="submit"
onclick="return myFunction1(this.form)"
value="Send"/>
</div>
</form>
Og vi modifiserer funksjonen slik:
function myFunction1(form){
T=form.message.value;
if(T.length == 0){
alert('Du har ikke skrevet noe');
return false;
}
return true;
}
Da har vi oppnådd et minimum av inputkontroll i og med at vi ikke sender dataene
dersom message-feltet (som er det eneste innholdbærende feltet) er tomt.
Formuleringen over er generelt ganske nyttig og vanlig ved input kontroll.
Det vi altså gjør er å hindre submit med å returnere false fra vår funksjon.
La oss nå anta at vi ønsker "å sende med" data fra elementer i HTML-siden som ikke er plassert inne
i formen. F.eks. slik:
Exsempel 4
<ul>
<li id="nr1">RBK</li>
<li id="nr2">Brann</li>
</ul>
<form action="http://www.it.hiof.no/~borres/cgi-bin/demo/std.py"
method="get">
<div>
Melding: <br/><input type="text" name="message" size="5"/>
<input type="hidden" name="lagliste"/>
<input type="submit"
onclick="return myFunction2(this.form)"
value="Send"/>
</div>
</form>
Og vi modifiserer funksjonen slik:
function myFunction2(form){
T=form.message.value;
if(T.length == 0){
alert('Du har ikke skrevet noe');
return false;
}
var S='';
for (ix=1;ix!=3;ix++)
S+=document.getElementById('nr'+ix).innerHTML+',';
form.lagliste.value=S;
return true;
}
Da har altså hentet data fra andre områder, pakket dem sammen og så og si: "lagt dem på lasset".
De dataene vi henter på den måten kan være avhengig av hva vi har skrevet, eller valgt,
i andre input-felter og de
kan ha blitt plassert ymse steder av det skriptet som kanskje opprinnelig
laget den siden vi jobber på.
Det er en kjent problemstilling både i programmering av dialogbokser
i vanlige programmer og i handtering av forms på vevsider at bruk av
enter-tasten fra brukeren fungerer automatisk som om brukeren hadde
klikket på "default"-knappen, "ok" i dialogbokser eller "submit" i
forms. Dette oppfattes av mange som standard oppførsel og bør derfor ikke
endres. Andre finner det irriterende at et "utilsiktet" enter-trykk
skal føre til avslutning av en dialogsituasjon.
Dette lar seg kontrollere, også på forms.
Exsempel 5
I en form kan vi plukke opp
tastetrykk og behandle dem som vi måtte ønske.
Skriv i de tre feltene nedenfor og se at de oppfører seg forskjellig
når du bruker "enter"-tasten.
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py"
method="post"
id="formq">
<div>
<textarea name="message" cols="10" rows="5">
</textarea>
<br/>
<input type="text" name="single1" size="10"/>
<br/>
<input type="text" name="single2" size="10"/>
<br/>
<input type="submit" value="Send"/>
</div>
</form>
Den involverte Javascriptkoden ser slik ut. Merk at funksjonen
startup kalles slik <body onload="startup()">
function startup(){
document.getElementById("formq").single1.onkeypress=checkKey;
}
function checkKey(evt) {
var evt = (evt) ? evt : event
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode == 13) {
return false;
// or what ever we want to do
// form validation is a reasonable task
}
}
Vi kan trikse litt med selve submit-mekanismen.
Skriv i de tre feltene nedenfor og se at ingen av dem fører
til "submit" når vi trykker "enter"-tasten.
Exsempel 6
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py"
method="post"
onsubmit="return false"
id="formx">
<div>
<textarea name="message" cols="10" rows="5">
</textarea>
<br/>
<input type="text" name="single1" size="10"/>
<br/>
<input type="text" name="single2" size="10"/>
<br/>
<input type="button" value="Send"
onclick="document.getElementById('formx').submit()"/>
</div>
</form>
