Retrieve the value of an input field using JavaScript.

0

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.


retrieve the value of an input field using JavaScript


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:


getting the value of input field.


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:

  1. How to animate the input field on focus using HTML and CSS.
  2. How to create the input field animation using HTML CSS and JavaScript.
  3. How to disable the input field using JavaScript on click.
  4. How to clear the input field using JavaScript.
  5. How to create the input fields for OTP inputs.


Tags

Post a Comment

0Comments
Post a Comment (0)
To Top