Forms - Scripting

Det er to problemstillinger som melder seg i forbindelse med form-elementer:

• Kan vi bruke Javascript til å kontrollere/bearbeide input-verdier før de går til tjeneren. Input kontroll kan være et stikkord.
• Kan vi bruke form-elementer som f.eks. select uten å kople dem til overføring av data til tjener. Altså bruke dem for å kontrollere aktiviteter lokalt på klienten, i nettleseren.

Vi skal se litt på disse problemstillingene i denne modulen.

inputkontroll

Vi ser på et enkelt eksempel:

HTML-koden:

<form action="http://www.ia.hiof.no/~borres/cgi-bin/forms/std.py"
      method="post"
      onsubmit="javascript:return validate()">
<div>
  Medlemsnr: <input type="text" size="14" name="no" id="no"/> * 
</div>
<div>Melding:<br/>
<textarea name="message" cols="25" rows="7">meldingen her
</textarea>
<br/>
<input type="submit" value="Send"/>
<input type="reset" value="Blank"/>
</div>
</form>

Vi vil sjekke at medlemnummeret er fylt inn og at det består av bare siffere. Det er mange måter å gjøre dette på. Pass på at du velger en løsning som virker på de nettleserne du har som målgruppe. Koden nedenfor er ikke særlig sofistikert, men ser ut til å fungere greitt på nye nettlesere. Det er rimelig greitt å generalisere koden til flere felter og andre betingelser.

function IsEmpty(aTextField)
{
   if ((aTextField.value==null) || (aTextField.value.length==0))
      return true;
   return false;
}

function IsNumeric(theText)
{
   var legals = "0123456789";
   if (theText.length==0)
       return false
   for (i = 0; i != theText.length; i++)
      if (legals.indexOf(theText.charAt(i)) == -1)
        return false;
   return true;

}

function validate()
{
   mnummer=document.getElementById("no");
   if(IsEmpty(mnummer))
   {
      alert('Mangler medlemsnumemr')
      return false;
   }

   if (!IsNumeric(mnummer.value))
   {
      alert('Bare siffere i medlemsnummeret')
      return false;
   }
  return true;
}

Merk spesielt den mekanismen som gjør at vi "dreper" submit knappens ambisjoner om å sende data til tjeneren.

onsubmit="javascript:return validate()"

Dersom javascriptet returnerer false, så vil ikke submit-aksjonen bli effektuert.