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

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">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const textValue = document.getElementById('textInput').value;

• Explanation: Retrieves the value entered in the text input field.

---

2. Email Input

• HTML Code:

  <input type="email">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const emailValue = document.getElementById('emailInput').value;

• Explanation: Retrieves the email entered by the user. This field expects a valid email format.

---

3. Password Input

• HTML Code:

  <input type="password">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const passwordValue = document.getElementById('passwordInput').value;

• Explanation: Retrieves the text entered in the password input field.

---

4. Number Input

• HTML Code:

  <input type="number">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const numberValue = document.getElementById('numberInput').value;

• Explanation: Retrieves the number entered in the input field.

---

5. Date Input

• HTML Code:

  <input type="date">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const dateValue = document.getElementById('dateInput').value;

• Explanation: Retrieves the selected date in YYYY-MM-DD format.

---

6. Radio Button

• HTML Code:

  <input type="radio">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const radioValue = document.querySelector('input[name="radioInput"]:checked')?.value || null;

• Explanation: Retrieves the value of the selected radio button. If none is selected, it returns null.

---

7. Checkbox

• HTML Code:

  <input type="checkbox">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const checkboxValues = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value);

• 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>

• JavaScript Code:

  const dropdownValue = document.getElementById('dropdownInput').value;

• Explanation: Retrieves the selected value from the dropdown menu.

---

9. Textarea

• HTML Code:

  <textarea>

• JavaScript Code:

  const textareaValue = document.getElementById('textareaInput').value;

• 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:

  <input type="text">

• JavaScript Code:

  const textValue = document.getElementById('textInput').value;

---

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.

The above is the detailed content of How to retrieve values from all types of HTML Inputs in JavaScript. For more information, please follow other related articles on the PHP Chinese website!