Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to display value of textbox in JavaScript?
To display value of textbox in JavaScript, you can access the user input for validation, form processing, or real-time feedback. This is essential for checking email format, password strength, and other input validation requirements.
In this article, we will explore two different approaches to get and display textbox values in JavaScript using practical examples.
Approaches to Display Value of Textbox
Here are the main approaches to display textbox values in JavaScript that we'll cover:
Using value Property
The value property is the most straightforward way to get textbox content. It directly accesses the current value of input elements.
How It Works
- Use getElementById() to select the textbox element
- Access the
valueproperty to get the current text - Display the result using innerHTML or innerText
Example 1: Basic Input Field
<!DOCTYPE html>
<html>
<head>
<title>Display Textbox Value</title>
</head>
<body>
<h2>Display Textbox Value in JavaScript</h2>
<p>Enter text and click the button to display the value:</p>
<input type="text" id="textInput" placeholder="Enter your text here">
<button onclick="showValue()">Get Value</button>
<div id="output" style="margin-top: 10px; font-weight: bold;"></div>
<script>
function showValue() {
const inputValue = document.getElementById("textInput").value;
document.getElementById("output").innerHTML = "Entered Value: " + inputValue;
}
</script>
</body>
</html>
Example 2: Using Textarea
<!DOCTYPE html>
<html>
<head>
<title>Display Textarea Value</title>
</head>
<body>
<h2>Display Textarea Value in JavaScript</h2>
<p>Enter multiple lines of text:</p>
<textarea id="textArea" rows="4" cols="50" placeholder="Enter multiple lines here"></textarea><br><br>
<button onclick="showTextareaValue()">Get Textarea Value</button>
<div id="textOutput" style="margin-top: 10px; white-space: pre-line; border: 1px solid #ccc; padding: 10px;"></div>
<script>
function showTextareaValue() {
const textareaValue = document.getElementById("textArea").value;
document.getElementById("textOutput").innerHTML = "Entered Text:
" + textareaValue;
}
</script>
</body>
</html>
Using FormData Object
The FormData object is useful when working with forms containing multiple input fields. It provides a structured way to access form data.
How It Works
- Create a
FormDataobject from the form element - Use the
get()method with the input'snameattribute - Display the retrieved value
Example: Form Data Approach
<!DOCTYPE html>
<html>
<head>
<title>FormData Example</title>
</head>
<body>
<h2>Display Textbox Value using FormData</h2>
<p>This example uses FormData to get textbox values:</p>
<form id="userForm">
<input type="text" name="username" placeholder="Enter username"><br><br>
<input type="email" name="email" placeholder="Enter email"><br><br>
<button type="button" onclick="displayFormValues()">Show Values</button>
</form>
<div id="formOutput" style="margin-top: 15px; background-color: #f5f5f5; padding: 10px;"></div>
<script>
function displayFormValues() {
const form = document.getElementById('userForm');
const formData = new FormData(form);
const username = formData.get('username');
const email = formData.get('email');
document.getElementById('formOutput').innerHTML =
`<strong>Form Values:</strong><br>
Username: ${username}<br>
Email: ${email}`;
}
</script>
</body>
</html>
Comparison of Methods
| Method | Use Case | Complexity | Best For |
|---|---|---|---|
| value Property | Single input access | Simple | Individual textboxes |
| FormData Object | Multiple form inputs | Moderate | Complete forms |
Key Points
- The
valueproperty is the most direct method for single inputs - FormData is better for handling multiple form fields together
- Both methods work with various input types: text, email, password, etc.
- Always validate user input before processing
Conclusion
Use the value property for simple textbox access and FormData for complex forms with multiple inputs. Both methods provide reliable ways to capture and display user input in JavaScript applications.
19K+ Views
