THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
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>
Using 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 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
getElementsByClassName class selector to read input value
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
getElementsByName selector to parse input value
getElementsByName is a method in 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">
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 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 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
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
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 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>
