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.
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
.
<p>Acceseaza un <form> 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>
<p>Acceseaza un <form> 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 sunt mai multe form-uri cu acelasi 'class', metoda querySelector()
va returna pe primul.
<p>Acceseaza un <form> 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.
eform.acceptCharset
- returneaza sau seteaza valoarea atributului accept-charset
.<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>.<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'.<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 <form>, 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<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>.<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>
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>
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').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>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
h3 { padding: 2px 0.2em; }
// preia primul Div cu class="cls", si afiseaza continutul var elm = document.querySelector("div.cls"); alert(elm.innerHTML);
if(isset($_POST["field"])) { echo $_POST["field"]; }
We speak english. - Noi vorbim engleza.
Nosotros hablamos español. - Noi vorbim spaniola.