Inainte de aparitia limbajului JavaScript, singurul scop al unui formular HTML era de a expedia serverului datele colectate pe partea de client. Deoarece partea de client în sine nu era destulde puternica pentru a prelucra datele, serverul era responsabil de acest lucru. JavaScript permite însa sa se adauge mai mult din partea de prelucrare a datelor pe partea de client, însa nu elimina necesitatea înaintarii formularului catre server pentru acele scopuri care necesita putere mare de prelucrare sau care nu pot fi realizate pe partea de client.
Practic, printre cele mai importante aplicatii de dezvoltare JavaScript se numara controlarea si manipularea form-urilor HTML. Cu limbajul JavaScript formularele au devenit mai puternice.
Lucrul cu form-uri
Obiectul document si handlerele de evenimente asociate lui sunt 525c26f proiectate în mod special în scopul facilitarii controlului form-urilor HTML. In principiu, interfata oferita de formularele HTML prezinta mai multe avantaje, ca de exemplu:
Totusi, interfata formularelor HTML prezinta si unele deficiente, care sunt în principiu rezolvate prin utilizarea limbajului JavaScript:
In principiu, lucrul cu formulare în JavaScript se bazeaza pe utilizarea unui formular HTML, definit de obiectului Form. In HTML, obiectul Form este definit în urmatorul mod:
<form
[name=] nume formular
[action=] URL- serverului catre care form-ul este trimis
[enctype=] felul codificarii MIME a formularului
[method=] felul in care formularul este trimis serverului (GET, POST, .); valoarea acestui parametru este dependenta de procesul pe parte de server; asa încît trebuie verificate pe cît posibil înainte cerintele programului server
[target=] numele ferestrei destinatie careia serverul îi returneaza informatiile; daca acest parametru nu este specificat, atunci rezzultatele se afiseaza în fereastra care a formularul care a trimis formularul. Daca se foloseste un set de cadre, atunci proprietatea target poate fi un cadru specificat de parametrul name al etichetei <frame>. De asemenea, se pot utiliza nume specifice pentru fereastra care contine documentul HTML curent, ca de exemplu: top sau parent.
[onSubmit=] metoda apelata la transmiterea formularului
</form>
 |
<html>
<head>
<title>Formular informatii</title>
<script language="javascript">
function verif_tip()
}
</script>
</head>
<body>
<form name="form1" action="https://www.google.com"
method="post"
onSubmit="verif_tip()">
<p><h3>Informatii de contact</h3>
<pre>
<em> Nume </em><input type="text"
size="25" maxlength="256"
name="nume">
<em> Prenume </em><input type="text" size="25" maxlength="256"
name="prenume">
<em> Adresa </em><input type="text"
size="25" maxlength="256"
name="adresa">
<em> Email </em><input type="text"
size="20" maxlength="20"
name="email">
</pre>
<input type="checkbox" name="unde"
value="off">Informatii Microsoft
<input type="submit" value="Trimite datele">
<input type="reset" value="Anuleaza">
</form>
</body>
</html>
In cadrul acestuia, informatiile din form sunt transmise catre locatii diferite. In cazul neselectarii check-box-ului, acestea sunt transmise catre adresa https://www.google.com unde serverul nu poate procesa aceasta cerere (evident e doar un exemplu.), returnînd o eroare de tipul: "501 Not Implemented - The server is unable to process your request".
Validarea cîmpurilor dintr-un formular reprezinta o operatie pentru care JavaScript ofera suport complet. De exemplu, validarea unui cîmp din cadrul unui formular, prin care se verifica daca a fost completat acel cîmp (nu e vid), se poate realiza prin urmatoarea functie:
//verifica
daca un cimp este vid
function checkBlank(field)
}
Dupa prima linie care este un comentariu, se defineste functia denumita checkBlank. Functia are un parametru numit field. Linia de început a functiei este un if care verifica daca valoarea obiectului de intrare (o caseta text de intrare a form-ului) este goala. Daca da, se declanseaza doua actiuni: se deschide o cutie de alertare pentru atentionarea utilizatorului si se apeleaza metoda focus() a obiectului câmp de intrare. Aceasta muta cursorul pe elementul de intrare HTML corespunzator respectivului obiect, pentru a forta introducerea de date.
Aceasta functie trebuie definita în câmpul <head> al paginii HTML, astfel sa poata fi apelata din orice punct din <body> al aceleasi pagini. In continuare este prezentat HTML-ul pentru asocierea handler-ului de eveniment onChange cu caseta text de intrare numita eName. Acesta înseamna ca functia checkBlank va fi apelata la fiecare schimbare a datelor de catre utilizator.
<input type="text" name="eName" size=15 onChange="checkBlank(this)">
Manevratorul eveniment onChange trece elementul form curent numit eName ca si parametru pentru functia checkBlank. Utilizarea cuvântului this este o maniera convenabila de transmitere a unei referinte catre obiectul curent fara a-i specifica numele.
La modul cum este construita functia checkBlank permite sa se poata transmite functiei orice element text de intrare (nu impune conditii asupra a ceea ce trebuie sa contina intrarea).
Verificarea introducerii numerelor pozitive
De multe ori este necesar sa existe siguranta ca un element de intrare contine un numar - de exemplu un numar pozitiv întreg. Codul de verificare este ceva mai complicat întrucât JavaScript nu dispune de un tip specific asociat datelor numerice. In exemplul de mai jos, se verifica daca utilizatorul a introdus un numar întreg pozitiv între 0 si 9. Daca nu, se va pozitiona cursorul pe acel câmp. Problema verificarii este divizata în doua functii: functia checkNum, care realizeaza validarea si raspunsul, si functia isNumber, care parcurge toate caracterele sirului pentru a vedea daca este un numar cuprins între 0 si 9; aceasta este apelata în procesul de validare realizat de functia checkNum.
//
determina daca un cimp contine elemente non-numerice function checkNum(field) else
}
// itereaza prin string pentru a verifica
faptul ca fiecare caracter este un numar
function isNumber(inputStr)
}
return true;
}
Functia checkNum este setata în mod diferit de functia checkBlank. Ea permite o procesare aditionala în cazul când s-a introdus un numar valid. Pur si simplu se înlocuieste comentariul cu cod pentru calculul dorit (calcul taxe, calcul totaluri, etc.). Ramura else a conditiei de test este pentru rezolvarea erorilor. Ca în cazul functiei anterioare, se trimite un mesaj de alerta si se muta cursorul pe câmpul eronat; în plus, se apeleaza metoda select() a obiectului câmp: aceasta selecteaza întregul text din câmp, facilitând schimbarea continutului câmpului pentru utilizator.
Handlerul de eveniment onChange este utilizat pentru verificare; astfel, de fiecare data când utilizatorul modifica numarul dat, este declansata functia.
<input type="text" name="hours" size=3 maxlength=2
onChange="checkNum(this)">
Validarea checkbox-urilor
JavaScript permite testarea si manipularea si altor elemente
form, cum ar fi
checkbox-urile. În exemplul urmator se utilizeaza un if pentru a
verifica ca s-a completat un checkbox. Daca nu, se trimite un mesaj
de alerta utilizatorului si se face, automat, completarea
checkbox-ului pentru utilizator. In felul acesta se seteaza un checkbox ce
nu poate fi sters niciodata.
// functie care verifica faptul ca un
checkbox validat
function
checkCopy(form) else
}
Aceasta functie primeste un întreg obiect form si nu un singur câmp al obiectului. Acceseaza un câmp numit corporate din form. Proprietatea de marcare a câmpului este adevarata daca cutia asociata este completata si falsa daca nu este completata.
Apelul functiei se realizeaza cu ajutorul handler-ului evenimentului onBlur. Functia este declansata de fiecare data când utilizatorul muta cursorul de pe câmp dupa ce a a demarcat câmpul. Se poate obsera ca handler-ul de evenimente parcurge tot obiectul si nu numai câmpul obiectului.
Corporate:<input type="checkbox" name="corporate" value="yes"
checked
onBlur="checkCopy(this.form)">
Client:<input type="checkbox" name="client"
value="yes">
Employee:<input type="checkbox" name="employee"
value="yes">
Daca asamblam diferitele segmente de cod prezentate mai sus, obtinem un exemplu functional. S-a adaugat un tabel pentru formatarea HTML-ului si o verificare finala pentru verificarea completarii tuturor câmpurilor la momentul apasarii pe butonul Submit.
<html>
<head>
<title>Evidenta Angajati</title>
<script language="JavaScript" src="validare.js">
//includerea
functiilor de mai sus intr-un fisier separat .js
</script>
</head>
<body>
<center>
<h1>Validare form-uri in JavaScript</h1>
<form name="timesheet"action="#"
method="post">
<table>
<tr><td align=right>Employee Name:
<td align=left><input type="text" name="eName"
size=15
onChange="checkBlank(this)">
<tr><td align=right>Hours Worked:
<td align=left><input type="text" name="hours"
size=3 maxlength=2
onChange="checkNum(this)">
<tr><td
align=right>Send Copy to:
<td align=left>
Corporate:<input type="checkbox" name="corporate" value="yes"
checked
 |
Un element important îl reprezinta de multe ori asigurarea caracterului complet al completarii unui formular. Astfel, formularele consta adestea din cîmpuri obligatorii si cîmpuri optionale. Acestea nu pot fi prelucrate cu succes decît daca oate datele obligatorii sunt introduse. In exemplul urmator, este aratat modul în care se poate asigura completarea cîmpurilor obligatorii dintr-un formular utilizînd JavaScript.
<head>
<title>Informatii de contact</title>
<script language="JavaScript">
function emptyField(obiect_form)
return true;
}
function validare_cimpuri(un_form)
return false;
}
</script>
</head>
<body>
<h1>Informatii de contact<h1>
<form name="contact" action="#" method="post"
onSubmit="return
validare_cimpuri(document.contact)">
<pre>
Numele: <input
type="text" name="nume">
Prenumele: <input type="text" name="prenume">
Adresa: <input type="text"
name="adresa">
</pre>
Localitatea: <input type="text" name="localitate"
size=12>
Tara: <input
type="text" name="tara" size=12>
Cod postal: <input
type="text" name="cod" size=5>
<pre>
Telefon acasa: <input
type="text" name="tel_a" size=12>
Telefon serviciu <input type="text"
name="tel_se"size=12>
Email: <input
type="text" name="email">
</pre>
<hr>
<input type="submit" name="submit"
value="Trimite">
</form>
</body>
</html>
Astfel, în cadrul acestuia,
cîmpurile nume, prenume, adresa, localitatea,
email-ul sunt tobligatorii. Cînd este înaintat formularul, functia de
validare apelata, validare_cimpuri verifica daca aceste cîmpuri
sunt completate ; în caz contrar, se transmite
utilizatorului un mesaj de atentionare iar formularul nu este înaintat
catre server. Programul efectueaza o validare foarte simpla : nu este în schimb în nici un fel
verificata corectitudinea introducerii datelor în cadrul cîmpurilor.
O cale de a-i oferi utilizatorului un feedback în timp ce introduce date într-un formular o reprezinta utilizarea unor mesaje de stare. Mesajele de stare sunt expresiile care apar pe bara de stare de labaza unei ferestre ; aceste mesaje pot fi modificate cu ajutorul lui JavaScript. Utilizarea mesajelor de stare în locul ferestrelor de dialog este uneori preferata întrucît nu atrag atît de mult atentia.
<html>
<head>
<title>Form cu mesaje de stare</title>
<script language="JavaScript">
function MesajStare(tip_mesaj)
if(tip_mesaj=="intreg")
if(tip_mesaj=="suma")
if(tip_mesaj=="card")
window.defaultStatus=mesaj;
window.status=mesaj;
}
</script>
</head>
<body onFocus="MesajStare('')">
<form name="form_mesaje" action="#"
method="post"><br>
<pre>
Numele: <input type="text" size=20 maxlength=20 name="nume"
onFocus="MesajStare('sir')">
Prenumele: <input type="text" size=20 maxlength=20
name="prenume"
onFocus="MesajStare('sir')">
Virsta: <input type="text" size=5 maxlength=5 name="virsta"
onFocus="MesajStare('intreg')">
Suma: <input type="text" size=6 maxlength=6 name="suma"
onFocus="MesajStare('suma')">
Card: <input type="text" size=16 maxlength=16
name="card"
onFocus="MesajStare('card')">
 |
Nu toate cîmpurile unui formular sunt cîmpuri unde trebuie introduse date; unele cîmpuri pot fi calculate, în functie de valoarea altor cîmpuri din cadrul unui formular. Astfel, se pot crea mici aplicatii interactive, în cadrul carora însa toata prelucrarea este realizata în JavaScript, pe partea de client. Un exemplu în acest sens îl reprezinta un formular care simuleaza functionarea unui calculator de dobînzi:
<html>
<head>
<title>Calculator dobinzi cumulate</title>
<script language="JavaScript">
function calculeaza(un_form)
</script>
</head>
<body>
<h1>Calculator dobinda<h1>
<form name="calculator">
<pre>
Valoarea actulala : <input type="text" name="val_act">
Dobinda (% per an): <input type="text"
name="dob_act">
Ani: <input
type="text" name="ani">
<input type="button" name="calci"
value="Calculeaza"
onClick="calculeaza(calculator)">
</pre>
<hr>
<pre>
Dobinda totala : <input type="text" name="dob_tot">
Valoarea finala: <input type="text" name="val_dupa">
</pre>
</form>
</body>
</html>
 |
Se observa în acest exemplu utilizarea unui obiect button; evenimentul onClick al obiectului button are ca rezultat apelul functiei calculeaza, si care calculeaza si afiseaza dobînda totala si valoarea finala functie de datele intoduse în primele trei cîmpuri.
|
