!

Dette materialet blir ikke lenger vedlikeholdt. Du vil finne oppdatert materiale på siden: http://borres.hiof.no/wep/

JavaScript
Forms
Børre Stenseth
JavaScript >Å lese forms

Å lese data fra forms

Hva
Hvordan plukke verdier 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.it.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

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:

Melding:
<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
Melding:
<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
Melding:
<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
  • RBK
  • Brann
Melding:
<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>
Referanser
  1. Introduction to JavaScript Peter-Paul Koch QuirksMode.org www.quirksmode.org/js/ 14-03-2010
Vedlikehold

Børre Stenseth, oktober 2006

( Velkommen ) JavaScript >Å lese forms ( Inputkontroll )