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>
Un exemplu de schimbare a
proprietatii action a unui formular utilizīnd JavaScript este
urmatorul:
<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
onBlur="checkCopy(this.form)">
Client:<input type="checkbox" name="client"
value="yes">
Employee:<input type="checkbox" name="employee"
value="yes">
<tr><td align=right>
<tr><td align=right>
<td align=left>
<input type="submit" name="enter" value="Trimite
datele">
</table>
</form>
</body>
</html>
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')">
</pre>
<br>
</form>
</body>
</html>
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.
|
