Obiectul form in JavaScript

Obiectul form reprezinta elementele HTML <form> si sunt in general utilizate pentru formulare de trimitere date de la o aplicatie la alta; date care pot fi adaugate /selectate de utilizator.

Preluare element <form> in JavaScript

Sunt mai multe moduri prin care elementele HTML <form> pot fi preluate ca obiecte in JavaScript.
In general se folosesc metodele: getElementById(), querySelector() sau proprietatea: document.forms.

Daca elementul <form> are un ID, se poate accesa cu oricare din aceste sintaxe:

document.getElementById('id_form')
document.querySelector('#id_form')
document.forms['id_form']

- Exemplu, preia un <form> dupa ID si afiseaza valoarea de la atributul 'action'.

<p>Acceseaza un &lt;form&gt; dupa ID si afiseaza valoarea de la atributul 'action'.</p>
<form id='frm1' action='some_page.php' method='post'>
<p>Acest formular cu id '#frm1' are action: <em id='resp'>#resp</em></p>
Text: <input type='text'/>
</form>

<script>
var frm = document.getElementById('frm1');
document.getElementById('resp').innerHTML = frm.action;
</script>

Daca elementul <form> are un atribut name, se poate accesa cu aceasta sintaxa:

document.forms['name_form']

- Exemplu, preia un <form> dupa 'name' si afiseaza valoarea de la atributul 'action'.

<p>Acceseaza un &lt;form&gt; dupa 'name' si afiseaza valoarea de la atributul 'action'.</p>
<form name='frm2' action='some_adr.php' method='post'>
<p>Acest formular cu name 'frm2' are action: <em id='resp'>#resp</em></p>
Text: <input type='text'/>
</form>

<script>
var frm = document.forms['frm2'];
document.getElementById('resp').innerHTML = frm.action;
</script>

Daca elementul <form> are o clasa css (atribut class), se poate accesa cu aceasta sintaxa:

document.querySelector('form.clas_form')

Daca sunt mai multe form-uri cu acelasi 'class', metoda querySelector() va returna pe primul.

- Exemplu, preia un <form> dupa 'class' si afiseaza valoarea de la atributul 'action'.

<p>Acceseaza un &lt;form&gt; dupa 'class' si afiseaza valoarea de la atributul 'action'.</p>
<form class='frm3' action='some_page.php' method='post'>
<p>Acest formular cu class 'frm3' are action: <em id='resp'>#resp</em></p>
Text: <input type='text'/>
</form>

<script>
var frm = document.querySelector('form.frm3');
document.getElementById('resp').innerHTML = frm.action;
</script>

In afara de proprietatile si metodele specifice elementelor html (prezentate la: marplo.net/javascript/proprietati-metode-element-html ), obiectul form contine proprietati si metode proprii.

Proprietati obiect form

eform.acceptCharset - returneaza sau seteaza valoarea atributului accept-charset.
- Atributul 'accept-charset' seteaza tipul de caractere (codarea) valabil pt. acel formular. Daca nu e specificat se aplica codarea documentului.

<h4>Exemplu form.acceptCharset</h4>
<form id='frm1' action='#' accept-charset='utf-8'>
Email: <input type='email' name='email'><br>
Pass: <input type='password' name='password'>
</form>
<p>Afiseaza valoarea proprietatii acceptCharset.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('resp').innerHTML ='accept-charset = '+ frm1.acceptCharset;
</script>

eform.action - returneaza sau seteaza valoarea atributului action.

<h4>Exemplu form.action</h4>
<form id='frm1' action='page.php'>
Email: <input type='email' name='email'><br>
Pass: <input type='password' name='password'>
</form>
<p> La clic pe buton afiseaza valoarea de la 'action' si seteaza alta valoare.<br>
 - La al doilea clic afiseaza la #resp noua valoare adaugata.</p>
<button id='btn1'>Action</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.action;
 frm1.action ='other_page.php';
});
</script>

eform.autocomplete - returneaza sau seteaza valoarea atributului autocomplete din <form>.
- Cand valoarea e 'on' (default), browser-ul completeaza automat valori in casete bazat pe valori adaugate anterior de utilizator.
- Valoarea 'off' anuleaza aceasta functionalitate.

<h4>Exemplu form.autocomplete</h4>
<form id='frm1' action='#' autocomplete='off'>
Email: <input type='email' name='email'><br>
Name: <input type='text' name='nume'>
</form>
<p>La clic pe buton afiseaza la #resp valoarea de la 'autocomplete' si seteaza alta valoare.<br>
 - La al doilea clic afiseaza noua valoare adaugata.</p>
<button id='btn1'>Autocomplete</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.autocomplete;
 frm1.autocomplete ='on';
});
</script>

eform.elements - contine un obiect tip array cu elementele din formular, in ordinea in care sunt adaugate. acestea pot fi accesate dupa index-ul de ordine (incepand de la 0), sau dupa nume (care e adaugat la atributul 'name').

<h4>Exemplu form.elements</h4>
<form action='#' id='frm1'>
Email: <input type='email' name='email' value='some@email.net'><br>
Pass: <input type='password' name='password' value='some_pass'>
</form>
<p> Afiseaza valoarea de la fiecare caseta din formular.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var felm = document.getElementById('frm1').elements;
var email = felm[0];
var pass = felm['password'];
document.getElementById('resp').innerHTML ='Email: '+ email.value +'<br>Pass: '+ pass.value;
</script>

eform.enctype - returneaza sau seteaza valoarea atributului 'enctype'.
- Atributul 'enctype' indica tipul de continut folosit pentru trimiterea formularului la server; valoarea default e 'application/x-www-form-urlencoded'.
- Valoarea 'multipart/form-data' permite casetei <input type='file'> sa uploadeze fisiere.

<h4>Exemplu enctype</h4>
<form id='frm1' action='#' method='post'>
Text: <input type='text'/>
</form>
<p>La clic pe buton afiseaza la #resp valoarea returnata de proprietatea 'enctype'.</p>
<button id='btn1'>enctype</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.enctype;
});
</script>

eform.length - contine numarul de elemente din formular.

<h4>Exemplu form.length</h4>
<form action='#' id='frm1'>
Email: <input type='email' name='email'><br>
Pass: <input type='password' name='password'><br>
<input type='submit' name='sbmt' value='Send'>
</form>
<p> Afiseaza numarul de elemente din &lt;form&gt;, le preia cu 'elements' si afiseaza numele lor.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
var res ='Nr. elemente in form: '+ frm1.length;

for(var i=0; i<frm1.length; i++) res +='<br>'+ frm1.elements[i].name;

document.getElementById('resp').innerHTML = res;
</script>

eform.method - returneaza sau seteaza valoarea atributului 'method' din <form>.

<h4>Exemplu form.method</h4>
<form id='frm1' action='#' method='get'>
Text: <input type='text' name='email'>
</form>
<p> La clic pe buton afiseaza valoarea de la 'method' si seteaza alta valoare.<br>
 - La al doilea clic afiseaza la #resp noua valoare adaugata.</p>
<button id='btn1'>method</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.method;
 frm1.method ='post';
});
</script>

eform.name - returneaza sau seteaza valoarea atributului 'name' din <form>.

<h4>Exemplu name</h4>
<form id='frm1' action='#' name='frm_name'>
Text: <input type='text'/>
</form>
<p>La clic pe buton afiseaza la #resp valoarea returnata de proprietatea 'name'.</p>
<button id='btn1'>name</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.name;
});
</script>

eform.noValidate - returneaza True daca atributul 'novalidate' este adaugat in <form>, in caz contrar, False. Defaul e true
- Daca atributul 'novalidate' e true, datele din formular vor fi validate inainte de a fi transmise.

<h4>Exemplu form.noValidate</h4>
<form id='frm1' action='#' noValidate>
Email: <input type='email' name='email'>
</form>
<p>La clic pe buton afiseaza la #resp valoarea 'true', indicand ca 'novalidate' e adaugat, apoi seteaza valoarea 'false' pt. atributul 'novalidate'.<br>
 - La al doilea clic afiseaza noua valoare adaugata.</p>
<button id='btn1'>noValidate</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.noValidate;
 frm1.noValidate = false;
});
</script>

eform.target - returneaza sau seteaza valoarea atributului 'target' din <form>.
- Atributul 'target' indica in ce fereastra sa fie afisate datele returnate din trimiterea formularului (poate fi utilizat atributul 'name' al unui <iframe>).

<h4>Exemplu form.target</h4>
<form id='frm1' action='#' target='iframe_name'>
Text: <input type='text' name='txt1'>
</form>
<p>La clic pe buton afiseaza la #resp valoarea atributului 'target', apoi seteaza alta valoare.<br>
 - La al doilea clic afiseaza noua valoare adaugata.</p>
<button id='btn1'>target</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.target;
 frm1.target ='_blank';
});
</script>

Metode obiect form

eform.reportValidity() - returneaza True daca datele din formular sunt valide (conform setarilor definite), in caz contrar False.

<h4>Exemplu form.reportValidity()</h4>
<form id='frm1' action='#'>
Nume: <input type='text' pattern='[A-z0-9]{3,}' required placeholder='Minim 3 litere / numere'><br>
Email: <input type='email' required>
</form>
<p> Casetele din formular au atributul 'required' (trebuie completate).<br>
 - La clic pe buton se verifica valoarea returnata de metoda reportValidity() si afiseaza raspuns la #resp.</p>
<button id='btn1'>Trimite</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var res = frm1.reportValidity() ?'Date completate corect' :'Completati corect toate casetele.<br>Numele cel putin 3 caractere, doar litere si numere';
 document.getElementById('resp').innerHTML = res;
});
</script>

eform.reset() - reseteaza datele din casetele din formular la valorile initiale (la fel ca butonul reset).

<h4>Exemplu form.reset()</h4>
<form id='frm1' action='#'>
Text: <input type='text' value='some-val'><br>
Select: <select><option value='gamv'>gamv.eu</option><option selected value='marplo'>marplo.net</option></select>
</form>
<p> Modificati datele din formular apoi apasati butonul urmator.</p>
<button id='btn1'>Rseteaza</button>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 frm1.reset();
 alert('form resetted');
});
</script>

eform.submit() - trimite datele din formular la adresa de la 'action' (la fel ca butonul Submit).

<h4>Exemplu form.submit()</h4>
<form id='frm1' action='#'>
Text: <input name='txt1' type='text'>
</form>
<p> Daca textul din caseta de text are cel putin 3 caractere, la clic pe buton formularul va fi transmis, daca are mai putin, afiseaza mesaj la #resp.</p>
<button id='btn1'>Trimite</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var tval = frm1['txt1'].value;
 if(tval.length >2) frm1.submit();
 else document.getElementById('resp').innerHTML ='Adaugati cel putin 3 caractere.';
});
</script>

Evenimente obiect form

Evenimentele se declansaza la efectuarea anumitor actiuni. Pot fi utilizate pentru executia unor functii la actiunea respectiva.

reset - se executa cand se reseteaza datele din formular (cu butonul 'reset', sau metoda reset() ).

<h4>Exemplu reset</h4>
<form id='frm1' action='#'>
Text: <input type='text' value='some-val'><br>
Select: <select><option value='gamv'>gamv.eu</option><option selected value='marplo'>marplo.net</option></select><br>
<input type='reset' value='Reset'>
</form>
<p> Modificati datele din formular apoi apasati butonul urmator.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');

//se executa cand se reseteaza #frm1
frm1.addEventListener('reset', (ev)=>{
 document.getElementById('resp').innerHTML ='Formularul e resetat.';
});
</script>

submit - se executa cand se trimite formular (cu butonul 'submit').
- E utila pentru validarea datelor din formular sau efectuarea anumitor instructiuni inainte de trimiterea datelor.
- Cu metoda ev.preventDefault() se blocheaza trimiterea automata a formularului ('ev' reprezinta evenimentul declansat, la care e asociata).

<h4>Exemplu submit</h4>
<form id='frm1' action='#'>
Text: <input type='text' name='txt1' placeholder='Minim 3 caractere'><br>
<input type='submit' value='Submit'>
</form>
<p> La trimiterea formularului (clic pe Submit), daca in caseta de text sunt mai putin de 3 caractere, afiseaza mesaj la #resp.<br>
 Daca sunt cel putin 3, trimite datele cu metoda submit().</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');

//se executa cand se trimite #frm1
frm1.addEventListener('submit', (ev)=>{
 //opreste trimiterea automata a form-ului
 ev.preventDefault();

 var tval = frm1['txt1'].value;
 if(tval.length <3) document.getElementById('resp').innerHTML ='Adaugati cel putin 3 caractere.';
 else frm1.submit();
});
</script>

<<-Obiectul anchor si Lucru .. -- Accesare elemente din form->>

Obiectul form in JavaScript

Curs Javascript

Preluare element <form> in JavaScript

Proprietati obiect form

Metode obiect form

Evenimente obiect form

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Last accessed pages

Popular pages this month