Accesare elemente din form

Curs Javascript

In <form> se pot adauga numeroase tipuri de elemente HTML de formular pentru diferite tipuri de date care pot fi adaugate sau selectate de utilizator.
- Vedeti tutorialele HTML: Creare formulare si HTML5 - Elemente si atribute noi in form.

Preluare elemente din <form> in JavaScript

Sunt mai multe moduri prin care elementele HTML dintr-un <form> pot fi preluate ca obiecte in JavaScript.
In general se folosesc metodele: getElementById(), querySelector(), formula: eform['elm_name'], sau proprietatea: eform.elements[index].

• Daca elementul din <form> are un ID, se poate accesa cu oricare din aceste sintaxe:
  document.getElementById('id_elm')
  document.querySelector('#id_elm')
  - Exemplu, preia dupa ID caseta de text dintr-un <form> si afiseaza valoarea de la 'value'.

  <h4>Accesare input dupa ID</h4>
  <form action='#' method='post'>
  Text: <input type='text' value='some-val' id='txt1'/>
  </form>
  <p>La clic pe buton, acceseaza dupa ID caseta text din Form si afiseaza la #resp valoarea de la 'value'.</p>
  <button id='btn1'>Click</button>
  <blockquote id='resp'>#resp</blockquote>
  
  <script>
  document.getElementById('btn1').addEventListener('click', (ev)=>{
   var ftxt = document.getElementById('txt1');
   document.getElementById('resp').innerHTML = ftxt.value;
  });
  </script>
  

• Daca elementul din <form> are un atribut name, se poate accesa cu aceasta sintaxa:
  eform['elm_name']
  Unde eform reprezinta obiectul formularului, iar 'elm_name' numele elementului din acel formular.
  - Exemplu, preia dupa 'name' caseta de text dintr-un <form> si afiseaza valoarea de la 'value'.

  <h4>Accesare input dupa name</h4>
  <form id='frm1' action='#' method='post'>
  Text: <input type='text' value='some-val' name='txt1'/>
  </form>
  <p>La clic pe buton, acceseaza dupa 'name' caseta text din Form si afiseaza la #resp valoarea de la 'value'.</p>
  <button id='btn1'>Click</button>
  <blockquote id='resp'>#resp</blockquote>
  
  <script>
  document.getElementById('btn1').addEventListener('click', (ev)=>{
   var frm1 = document.getElementById('frm1');
   document.getElementById('resp').innerHTML = frm1['txt1'].value;
  });
  </script>
  

• Daca elementul din <form> are o clasa css (atribut class), se poate accesa cu oricare din aceste sintaxe:
  document.querySelector('#id_form .clas_elm')
  eform.querySelector('.clas_elm')
  Unde 'id_form' este id-ul formularului in care e acel element, iar clas_elm este clasa elementului respectiv.
  - eform reprezinta obiectul formularului.

  Daca in acel <form> sunt mai multe elemente cu acelasi 'class', metoda querySelector() va returna pe primul.

  - Exemplu, preia dupa 'class' caseta de text dintr-un <form> si afiseaza valoarea de la 'value'.

  <h4>Accesare input dupa class</h4>
  <form id='frm1' action='#' method='post'>
  Text: <input type='text' value='some-val' class='ftxt'/>
  </form>
  <p>La clic pe buton, acceseaza dupa 'class' caseta text din Form si afiseaza la #resp valoarea de la 'value'.</p>
  <button id='btn1'>Click</button>
  <blockquote id='resp'>#resp</blockquote>
  
  <script>
  document.getElementById('btn1').addEventListener('click', (ev)=>{
   var ftxt = document.querySelector('#frm1 .ftxt');
   document.getElementById('resp').innerHTML = ftxt.value;
  });
  </script>
  

• Pentru accesarea unui element din <form> in functie de numarul de ordine (index care incepe de la 0), se pot folosi oricare din aceste sintaxe:
  eform[index]
  eform.elements[index]
  eform.item(index)
  Unde 'eform' reprezinta formularul in care e acel element, iar index e numarul de ordine (in functie de ordinea adaugarii elementelor in <form>).
  - Exemplu, preia primul element dintr-un <form> si afiseaza tipul lui (valoarea 'type').

  <h4>Preluare input dupa index de ordine</h4>
  <form id='frm1' action='#' method='post'>
  Check: <input type='checkbox' value='some-val'/><br>
  Text: <input type='text' value='txt-val'/>
  </form>
  <p>La clic pe buton, acceseaza primul element din Form si afiseaza la #resp tipu lui (valoarea de la 'type').</p>
  <button id='btn1'>Click</button>
  <blockquote id='resp'>#resp</blockquote>
  
  <script>
  document.getElementById('btn1').addEventListener('click', (ev)=>{
   var ftxt = document.getElementById('frm1');
   document.getElementById('resp').innerHTML = ftxt[0].type;
  });
  </script>
  

Elementele de formular au proprietati si metode specifice care pot fi utilizate in JavaScript pentru interactiunea cu utilizatorul.
- O lista cu proprietati si metode utile ale elementelor din <form> gasiti la pagina de la adresa:
marplo.net/javascript/proprietati-metode-elemente-form