To get textbox value in javascript example; In this tutorial, you will learn how to get textbox value in javascript using js methods like getElementById(), getElementsByClassName(),
A text box is a rectangular area on the screen where you can enter text. When you press Enter while typing in a text field, either the cursor will jump to the next field or the value will be submitted. In HTML, a text field is defined by an <input> tag with the type “text.” A text area is defined by a <textarea> tag
Before you know how to get value from textbox in JavaScript, you must have knowledge of getElementById(), getElementsByClassName() methods of JavaScript. Because this javascript dom methods help to select the elements in document.
How to Get Textbox Value in javaScript
- Method 1 – To Get Textbox Value in javaScript using getElementById and Function
- Method 2 – To Get Textbox Value in javaScript using getElementsByClassName and Function
Method 1 – To Get Textbox Value in javaScript using getElementById and Function
In the following example, using the getElementById method with a function from JavaScript, the value of the testbox has been gated:
<!DOCTYPE html>
<html>
<head>
<title>how to get textbox value in javascript - Tutsmake</title>
<script type="text/javascript">
function myFunction(){
var name = document.getElementById("name").value;
alert(name);
}
</script>
</head>
<body>
<form action="" method="">
<label>Name :-</label>
<input type="text" name="name" placeholder="Enter Name" id="name">
<button type="button" onclick="myFunction();">Click</button>
</form>
</body>
</html>
Method 2 – To Get Textbox Value in javaScript using getElementsByClassName and Function
In the following example, using the getElementsByClassName method with a function from JavaScript, the value of the testbox has been gated:
<!DOCTYPE html>
<html>
<head>
<title>how to get textbox value in javascript - Tutsmake</title>
<script type="text/javascript">
function myFunction(){
var name = document.getElementsByClassName("name").value;
alert(name);
}
</script>
</head>
<body>
<form action="" method="">
<label>Name :-</label>
<input type="text" name="name" class="name" placeholder="Enter Name" id="name">
<button type="button" onclick="myFunction();">Click</button>
</form>
</body>
</html>
