10 ways to read input form examples in javascript|JQuery

10 ways to read input form examples in javascript|JQuery

Html forms are interactive elements to take input from the user. Input is one of the important elements which provides different types - text, textarea, and button.

In this blog post, We are going to learn the following ways to read the input type text value in javascript and jquery.

Let us declare a form with input elements and a button

<html>
  <head>
    <title>Java form read input data example</title>
  </head>
  <script>
    function submitEvent(event) {
      event.preventDefault();
      var name = document.getElementById("name");
      var email = document.getElementById("email");
      console.log(name.value); //  name
      console.log(email.value); //  email
    }
  </script>

  <body>
    <form onsubmit="submitEvent(event)">
      <div>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" />
      </div>
      <div>
        <label for="email">Email</label>
        <input type="text" name="email" id="email" />
      </div>
      <div>
        <button onclick="submitEvent()">Submit</button>
      </div>
    </form>
  </body>
</html>

How to read form data with document getElementById selector

Document is a native inbuilt object in javascript. This is used to interact with HTML DOM objects and returns the data.

getElementById is one of the methods used to get the value of an element with an id selector Input is defined with an id value.

<input type="text" name="name" id="name" />

In javascript, input value can be read using getElementById selector

document.getElementById("name");

It outputs input elements as seen below

<input type="text" name="name" id="name" />

Its value property returns the name entered in the input

document.getElementById("name").value; // returns the user entered name

Read form data using getElementsByClassName class selector

This is a method in document objects to select the elements with classname. getElementsByClassName returns the all the elements with classname matched.

It is class select, return HTMLCollection

Input is defined with class value.

<input type="text" name="name" id="name" class="nameClass" />

In javascript, input value can be read using getElementById selector

let nameClasses = document.getElementsByClassName("nameClass");
console.log(nameClasses); //  return HTMLCollection
console.log(nameClasses[0]); //  return first input element
console.log(nameClasses[0].value); //  return entered input value

And the output in the console is

HTMLCollection [input#name.nameClass, name: input#name.nameClass]
<input type="text" name="name" id="name" class="nameClass" />
enteredvalue

Read form data using getElementsByName selector to parse input value

getElementsByName is a method in the document object used to select all the elements with the name attribute. This returns NodeList A simple input element is declared without

<input type="text" name="name" />

Let us see javascript code to read input value using getElementsByName

let nameValue = document.getElementsByName("name");
console.log(nameValue); //  return NodeList
console.log(nameValue[0]); //  return first input element
console.log(nameValue[0].value); //  return entered input value

And the output logged in the console is

NodeList [input#name.nameClass] <input type="text" name="name" />

form data read with getElementsByTagName selector to parse input value

This is the standard way of reading directly with input elements without a name, id, and class

getElementsByTagName returns Array of HTMLCollection, use the array index to return the specific input element.

<input type="text" name="name" /> <input type="text" name="email" />

Following is an example to read input value with getElementsByTagName

let nameValue = document.getElementsByName("name");
console.log(nameValue); //  return NodeList
console.log(nameValue[0]); //  return first name input element
console.log(nameValue[0].value); //  return entered input name value
console.log(nameValue[1]); //  return second  input element email
console.log(nameValue[1].value); //  return entered input email value

And the output shown in the console is

HTMLCollection(2) [input, input, name: input, email: input]0: input1:
inputlength: 2email: inputname: input__proto__: HTMLCollection
<input type="text" name="name" />
name
<input type="text" name="email" />
email

input form read with document querySelector to get html element values

querySelector is a method in document object, It allows a selection of elements with different selectors. The input element is declared as follows

<input type="text" name="name" id="name" class="nameClass" />

Important points

  • document.querySelector(“input”) select input element with tag name
  • document.querySelector(“.class”), get input element with CSS class name selector
  • document.querySelector(“#name”), get input element with id selector
let nameValue = document.querySelector(".nameClass");
console.log(nameValue); //  return input element
console.log(nameValue.value); //  return input value

And the output is

<input type="text" name="name" id="name" class="nameClass" /> name

javascript form read using document querySelectorAll to get all elements

querySelectorAll returns array NodeList Like querySelector, this is also used to select the elements using CSS selectors

let nameValue = document.querySelectorAll("input");
console.log(nameValue); //  return input element
console.log(nameValue[0].value); //  return input value

read form with Jquery selectors to read input element value example

The following are the examples to get input form element in jquery using multiple selectors.

First, please include the jquery library CDN in an HTML page

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Secondly, jquery ready has to be initialized and will be executed once DOM is loaded on the browser

$(document).ready(function () {
  // include selectors code to read input value
});

input element css class selector

<input type="text" name="name" class="inputClass" value="" id="inputId" />

and jquery code is

var inputValue = $(".inputClass").val();

input element selector get value

the input text is defined its value is read using jquery CSS selectors by the name of the element

<input type="text" name="name" class="inputClass" value="" id="inputId" />

and jquery code is

var inputValue = $("input:text").val();

Jquery id input selector

the input text is declared with the id attribute and its value is read using jquery CSS selectors

<input type="text" name="name" class="inputClass" value="" id="inputId" />

and jquery code is

var inputValue = $("#inputId").val();

Input events to read input text value

Here are the following examples using button click and keypress events

Following is an example reading input value with a keyUp event

<input type="text" name="name" onkeyup="keyUpEvent(this.value)" />

and function declaration

<script>
    function keyUpEvent(value) {
        console.log(value);
    }
</script>