Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to display value of textbox in JavaScript?
In this article we are going to learn about “How to display value of textbox in JavaScript”.
JavaScript allows you to create a textbox in two easy steps: In order to construct an <input> element, you must first utilize the document object's createElement("input") method.
The next step is to use the Element to change the type attribute of the newly generated <input> element to "text”. Text is contained in text boxes, which can be altered and moved around. They are helpful for underlining or embellishing text.
Example
In the following example, we are running the script along with a button with an OnClick event handler. When the click button is pressed, the repeatvalue() JavaScript function is called.
<!DOCTYPE html>
<html>
<body>
<input type="text" id="Username"/>
<input type="button" id = "tutorial" value="Click" onclick = "repeatvalue()" />
<hr />
<label id = "label"></label>
<script>
function repeatvalue() {
var txtName = document.getElementById("Username");
var lblName = document.getElementById("label");
lblName.innerHTML = txtName.value;
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of an input field along with a click button on the webpage. When the user enters the text and presses the click button, the event gets triggered and displays the value entered, by the user separately.
Example
Considering the following example, where we are running the script to display textbox value.
<!DOCTYPE html>
<html>
<body>
<label>Enter Password: </label><br>
<input type= password id="password" onchange="repeatvalue()"><br>
<script>
function repeatvalue() {
document.getElementById("tutorial").innerHTML =
document.getElementById("password").value;
}
</script>
<p id="tutorial"></p>
</body>
</html>
On running the above script, the web-browser displays an input field for the user. When the user enters password-type text into it, it displays stars in the textbox as soon as the user finishes entering, and when the user clicks "enter," the actual text is displayed on the webpage.
Example
Execute the below code to observe ‘How to display the textbox value on the webpage using JavaScript’.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jqueryui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
Enter your Name:
<input type="text" placeholder="enter your name" id="txtInputData">
<button onclick="displayName()">Click Me</button>
<p id="show_name"></p>
<script>
function displayName() {
var originalName = document.getElementById("txtInputData").value;
document.getElementById("show_name").innerHTML = "Your Name is :" + originalName;
}
</script>
</body>
</html>
When the script gets executed, it will provide an input field along with a click button on the webpage. When the user enters the text and presses the "click" button, an event gets triggered and displays the textbox value on the web-browser.
14K+ Views
