Accessing form fields

Javascript Course

There are many types of HTML form elements for different types of data that can be added or selected by the user.
- See the HTML tutorials: Forms and Input, and New Form elements and attributes in HTML5.

Accessing elements of <form> in JavaScript

There are several ways to access elements of a <form> in JavaScript.
Generally, these methods are used: getElementById(), querySelector(), the syntax: eform['elm_name'], or the eform.elements[index] property.

• If the form field has an ID, it can be ccessed with any of these syntaxes:
  document.getElementById('id_elm')
  document.querySelector('#id_elm')
  - Example, accesses an input <form> field using its id and displays its 'value'.

  <h4>Accesses the input by ID</h4>
  <form action='#' method='post'>
  Text: <input type='text' value='some-val' id='txt1'/>
  </form>
  <p>If you click the following button, accesses the text field by ID, and displays its '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>
  

• If the form field has a name attribute, it can be accessed with this syntax:
  eform['elm_name']
  Where eform is the form object, and 'elm_name' the name of the form field.
  - Example, accesses an input <form> field using its 'name' and displays its 'value'.

  <h4>Accesses the input by name</h4>
  <form id='frm1' action='#' method='post'>
  Text: <input type='text' value='some-val' name='txt1'/>
  </form>
  <p>If you click the following button, accesses the text field by its 'name', and displays its '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>
  

• If the form field has css class (in the class attribute), it can be accessed with any of these syntaxes:
  document.querySelector('#id_form .clas_elm')
  eform.querySelector('.clas_elm')
  Where 'id_form' is the ID of the form, and clas_elm is the css class of the form field.
  - eform represents the object with the HTML form.

  If there are multiple forms fields with the same 'class' in the specified form, the querySelector() method will return the first field with that class.

  - Example, accesses an input <form> field using its css 'class' and displays its 'value'.

  <h4>Accesses the input by class</h4>
  <form id='frm1' action='#' method='post'>
  Text: <input type='text' value='some-val' class='ftxt'/>
  </form>
  <p>If you click the following button, it accesses a form field by css class, and displays its '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>
  

• To access a form field according to the index order (index starting from 0), you can use any of these syntaxes:
  eform[index]
  eform.elements[index]
  eform.item(index)
  Where eform represents the object with the HTML form, and index is the order number of the field (according to the order of adding the items in <form>).
  - Example, accesses the first form field in a HTML <form> and shows its 'type'.

  <h4>Accesses input by its index order</h4>
  <form id='frm1' action='#' method='post'>
  Check: <input type='checkbox' value='some-val'/><br>
  Text: <input type='text' value='txt-val'/>
  </form>
  <p>If you click the following button, it accesses the first form field, and shows its '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>
  

Forms elements have specific properties and methods that can be used in JavaScript to interact with the user.
- There is a list with useful properties and methods of the elements from <form> at the page:
coursesweb.net/javascript/properties-methods-form-elements