10 ways of reading input form with examples in javascript| JQuery input element selector

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

Javascript examples to read input form

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

Let us declare an 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>

Using document getElementById selector

Document is an native inbuilt object in javascript. These is used to interact with html DOM object and returns the data.

getElementById is one of the method used to get the value of an element with id selector Input is defined with 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 element as seen below

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

It’s value property returns name entered in the input

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

getElementsByClassName class selector to read input value

This is an method in document object 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

getElementsByName selector to parse input value

getElementsByName is an method in document object used to select the all the elements with name attribute. This returns NodeList 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">

getElementsByTagName selector to parse input value

This is standard way of reading directly with input element without name,id and class

getElementsByTagName returns Array of HTMLCollection, use 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

document querySelector to get html element values

querySelector is a method in document object, It allows to select elements with different selectors. 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

document querySelectorAll to get all elements

querySelectorAll returns array NodeList Like querySelector, this 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

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 jquery library cdn in html page

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

Secondly, jquery ready has to be initialized, will be executed once DOM is loaded on 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

input text is defined its value is read using jquery css selectors by its 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

input text is declared with 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 following examples using button click and keypress events

Following is an example reading input value with keyUp event

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

and function declaration

<script>
    function keyUpEvent(value) {
        console.log(value);
    }
</script>
Similar Posts
Subscribe
You'll get a notification every time a post gets published here.


🧮 Tags

angular css es6 es7 git golang golang-examples hadoop haskell java java-convert java10 java11 java8 java9 javascript javascript-convert linux-unix lodash material maven nodejs nodered primeng primereact reactjs seo site sweetalert2 typescript vscode vuejs webdev


Related posts

Javascript Array Sort Numbers/strings/objects reverse

Convert NodeList to Array in javascript with examples | forEach examples

Six ways of remove property or key in object of Javascript|ES6 delete key in object examples

Javascript examples - GroupBy array of objects with keys and properties in typescript

ES 6 feature - template String literals | Learn ES2015 tutorials

How to Convert Array into string, comma,hyphen in javascript/Angular

How to check String/Number exists in enum of javascript/typescript