DEV Community

Millie Molotov
Millie Molotov

Posted on • Edited on

How to retrieve values from all types of HTML Inputs in JavaScript

#html #javascript #webdev

This blog explains how to use JavaScript to retrieve values from different input types in an HTML form by their id.

Input Types and Retrieval Methods

1. Text Input

  • HTML Code: 
 <input type="text" id="textInput">
Enter fullscreen mode Exit fullscreen mode
  • JavaScript Code: 
 const textValue = document.getElementById('textInput').value;
Enter fullscreen mode Exit fullscreen mode
  • Explanation: Retrieves the value entered in the text input field.

2. Email Input

  • HTML Code: 
 <input type="email" id="emailInput">
Enter fullscreen mode Exit fullscreen mode
  • JavaScript Code: 
 const emailValue = document.getElementById('emailInput').value;
Enter fullscreen mode Exit fullscreen mode
  • Explanation: Retrieves the email entered by the user. This field expects a valid email format.

3. Password Input

  • HTML Code: 
 <input type="password" id="passwordInput">
Enter fullscreen mode Exit fullscreen mode
  • JavaScript Code: 
 const passwordValue = document.getElementById('passwordInput').value;
Enter fullscreen mode Exit fullscreen mode
  • Explanation: Retrieves the text entered in the password input field.

4. Number Input

  • HTML Code: 
 <input type="number" id="numberInput">
Enter fullscreen mode Exit fullscreen mode
  • JavaScript Code: 
 const numberValue = document.getElementById('numberInput').value;
Enter fullscreen mode Exit fullscreen mode
  • Explanation: Retrieves the number entered in the input field.

5. Date Input

  • HTML Code: 
 <input type="date" id="dateInput">
Enter fullscreen mode Exit fullscreen mode
  • JavaScript Code: 
 const dateValue = document.getElementById('dateInput').value;
Enter fullscreen mode Exit fullscreen mode
  • Explanation: Retrieves the selected date in YYYY-MM-DD format.

6. Radio Button

  • HTML Code: 
 <input type="radio" id="radio1" name="radioInput" value="Option 1"> <input type="radio" id="radio2" name="radioInput" value="Option 2">
Enter fullscreen mode Exit fullscreen mode
  • JavaScript Code: 
 const radioValue = document.querySelector('input[name="radioInput"]:checked')?.value || null;
Enter fullscreen mode Exit fullscreen mode
  • Explanation: Retrieves the value of the selected radio button. If none is selected, it returns null.

7. Checkbox

  • HTML Code: 
 <input type="checkbox" id="checkbox1" value="Option A"> <input type="checkbox" id="checkbox2" value="Option B">
Enter fullscreen mode Exit fullscreen mode
  • JavaScript Code: 
 const checkboxValues = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value);
Enter fullscreen mode Exit fullscreen mode
  • Explanation: Retrieves all selected checkbox values as an array. If no checkboxes are selected, it returns an empty array.

8. Dropdown (Select)

  • HTML Code: 
 <select id="dropdownInput"> <option value="Option 1">Option 1</option> <option value="Option 2">Option 2</option> </select>
Enter fullscreen mode Exit fullscreen mode
  • JavaScript Code: 
 const dropdownValue = document.getElementById('dropdownInput').value;
Enter fullscreen mode Exit fullscreen mode
  • Explanation: Retrieves the selected value from the dropdown menu.

9. Textarea

  • HTML Code: 
 <textarea id="textareaInput"></textarea>
Enter fullscreen mode Exit fullscreen mode
  • JavaScript Code: 
 const textareaValue = document.getElementById('textareaInput').value;
Enter fullscreen mode Exit fullscreen mode
  • Explanation: Retrieves the text entered in the textarea field.

Example: Complete Script

Here is an example that retrieves values from all the input types in a form:

function submitForm() { const data = { textInput: document.getElementById('textInput').value, emailInput: document.getElementById('emailInput').value, passwordInput: document.getElementById('passwordInput').value, numberInput: document.getElementById('numberInput').value, dateInput: document.getElementById('dateInput').value, radioInput: document.querySelector('input[name="radioInput"]:checked')?.value || null, checkboxInput: Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value), dropdownInput: document.getElementById('dropdownInput').value, textareaInput: document.getElementById('textareaInput').value }; console.log(data); alert('Form data submitted! Check the console for details.'); }
Enter fullscreen mode Exit fullscreen mode

How to Use

  1. Add the HTML form elements to your webpage with the specified id attributes.
  2. Use the corresponding JavaScript snippet to retrieve values from the inputs.
  3. The collected data can be logged or sent to a server for further processing.

This documentation provides a clear reference for working with various input types in HTML and collecting their values using JavaScript.

Top comments (0)