Å lese data fra forms

Vi skal se litt på stragier for å plukke opp data fra input-felter i forms på en HTML-side. Det kan være flere årsaker til at vi ønsker å inspisere slike data:

• Vi ønsker å kontrollere det brukeren har skrevet før data går til tjeneren på vanlig måte.
• Vi ønsker å kontrollere det brukeren har skrevet før data går til en AJAX-request.
• Vi ønsker å bruke en form for å samle opp data som skal "ferdigbehandles" i Javascript.
• Vi ønsker å bruke Javascript til å samle sammen data fra en HTML-side ved hjelp av DOM-programmering (getElementById().innerHTML) og pakke dem i et skjult (hidden) input felt i en form før de blir sendt.

I alle eksemplene nedenfor brukes et enkelt Pythonskript på serveren for å gi respons. Dette skriptet, http://www.ia.hiof.no/~borres/cgi-bin/demo/std.py, plukker ut alle parameterne og returnerer parameter og verdi pakket inn i en minimalistisk HTML-side. Du kan se scriptet her: std_py.html

<form action="http://www.ia.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>

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:

<form action="http://www.ia.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>

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

<form action="http://www.ia.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>

function myFunction1(form){
    T=form.message.value;
    if(T.length == 0){
        alert('Du har ikke skrevet noe');
        return false;
    }
    return true;
}

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:

<ul>
<li id="nr1">RBK</li>
<li id="nr2">Brann</li>
</ul>

<form action="http://www.ia.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>

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;
}

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.

<form action="http://www.ia.hiof.no/~borres/cgi-bin/forms/std.py"
      method="post"
      name="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>

function startup(){
  document.forms["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.

<form action="http://www.ia.hiof.no/~borres/cgi-bin/forms/std.py"
      method="post"
      onSubmit="return false"
      name="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.formx.submit()"/>
   </div>
</form>