In this blog post, you'll learn how to retrieve the value of an input field using JavaScript. We'll explore how to achieve this by triggering the action with a button click.
Retrieving the Input Field Value on Click:
Extracting the value of an input field in JavaScript is a straightforward process. Here's a step-by-step guide:
Access the Input Field Value:
Use the input_field.value property to directly obtain the value entered by the user in the input field.
Here,
input_field: This refers to the input field itself.
Display the Value in an HTML Element:
To showcase the retrieved value within an HTML element, set its innerHTML property to input_field.value. This dynamically updates the element's content with the input value.
Example:
element.innerHTML = input_field.value;
Explanation:
element: This represents the HTML element intended for displaying the input field value. Here i have used innerHTML, instead of this you can use innerText also. (Different between innerText and innerHTML).
input_field: This refers to the input field itself.
See below code for better understanding.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get the value of input field. | maketechstuff.com</title>
</head>
<body>
<div class="box">
<input type="text" class="input_field">
<button class="button">Get The Value</button>
<div class="output"></div>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
background-color: #fff;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 500px;
text-align: center;
padding: 20px;
border-radius: 5px;
background-color: #e9e9e9;
}
input{
width: 100%;
font-size: 30px;
padding: 10px 0px;
text-align: center;
border: none;
outline: none;
}
button{
font-size: 25px;
background-color: blue;
color: #fff;
border: none;
padding: 10px 20px;
margin: 10px 0px;
cursor: pointer;
transition: 0.2s;
}
button:active{
transform: scale(0.9);
}
.output{
font-size: 25px;
font-weight: bold;
color: #000;
}
JavaScript
let input_field = document.querySelector(".input_field");
let button = document.querySelector(".button");
let output = document.querySelector(".output");
button.addEventListener("click", get_value_of_input_field);
function get_value_of_input_field() {
output.innerHTML = "";
output.innerHTML = "value: " + input_field.value;
}
Output:
So that's how you can retrieve input field values using JavaScript upon a button click! If you have any questions, suggestions, or insights, please feel free to write in the comments section below.
Thank you for your time and attention!
You may like:
- How to animate the input field on focus using HTML and CSS.
- How to create the input field animation using HTML CSS and JavaScript.
- How to disable the input field using JavaScript on click.
- How to clear the input field using JavaScript.
- How to create the input fields for OTP inputs.
- Create input field that convert text case instanlty on user input using JavaScript.
- Change the paragraph textcase on click using JavaScript.
- Create input field that replace multiple spaces between words to single space using JavaScript.
Share your thoughts.