Display Value of Textbox in JavaScript

To display value of textbox in JavaScript, it is used for checking real-time validity of user's input such as email format, password strength and many more. We will be understanding two different approaches in this article to display value of textbox in JavaScript.

In this article, we are having a text box and a button, our task is to display value of textbox in JavaScript.

Approaches to Display Value of Textbox

Here is a list of approaches to display value of textbox in JavaScript which we will be discussing in this article with stepwise explanation and complete example codes.

Using value Property

To display value of textbox in JavaScript, we have used value property. It is used to access or get the values of various attributes.

  • We have used an input tag to create a text box and button that triggers the showValue() function.
  • We have used getElementById to select the elements using their id and used value property to get the value of input text box.
  • This value is then displayed in HTML document using div with id output and innerHTML property.

Example 1

Here is a complete example code implementing above mentioned steps to display value of textbox in JavaScript using value property.

<!DOCTYPE html>
<html>
<head>
    <title>
        Displaying Value of Textbox in JavaScript
    </title>
</head>
<body>
    <h2>
        Displaying Value of Textbox in JavaScript
    </h2>
    <p>
        In this example we have used <strong>value</strong>
        property to display value of textbox in JavaScript.
    </p>
    <input type="text" id="text" placeholder="Enter Text"/>
    <button type="button" onclick="showValue()">
        Get Value
    </button>
    <br><br>
    <div id="output"></div>
    <script>
        function showValue() {
            let res = document.getElementById("output");
            res.innerHTML = "Entered Value: " 
                +document.getElementById("text").value;
        }
    </script>
</body>
</html>

Example 2

In this example we have implemented above mentioned steps to display value of textbox in JavaScript using value property with textarea tag.

<!DOCTYPE html>
<html>
<head>
    <title>
        Displaying Value of Textbox in JavaScript
    </title>
</head>
<body>
    <h2>
        Displaying Value of Textbox in JavaScript
    </h2>
    <p>
        In this example we have used <strong>value</strong>
        property on <strong>textarea</strong> to display value 
        of textbox in JavaScript.
    </p>
    <textarea id="text" placeholder="Enter Text"></textarea>
    <button type="button" onclick="showValue()">
        Get Value
    </button>
    <br><br>
    <div id="output"></div>
    <script>
        function showValue() {
            let res = document.getElementById("output");
            res.innerHTML = "Entered Value: " 
                +document.getElementById("text").value;
        }
    </script>
</body>
</html>

Using formData() Object

In this approach to display value of textbox in JavaScript we have used get() method of formData() object.

  • We have used an input tag to create a text box and a button that triggers the showValue() function.
  • Then we have used getElementById() method to select the form and used formData() constructor to create formData object.
  • Then we have used get() method to get the value of input text box. Then the value of text box is displayed using div and innerText property.

Example

Here is a complete example code implementing above mentioned steps to display value of textbox in JavaScript using formData object.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Displaying Value of Textbox in JavaScript
    </title>
</head>
<body>
    <h2>
        Displaying Value of Textbox in JavaScript
    </h2>
    <p>
        In this example we have used <strong>formData</strong> 
        object to display value of textbox in JavaScript.
    </p>
    <form id="myForm">
        <input type="text" name="myTextbox" placeholder="Enter Text">
        <button type="button" onclick="showValue()">
            Show Value
        </button>
    </form>
    <br>
    <div id="output"></div>
    <script>
        function showValue() {
            const form = document.getElementById('myForm');
            const formData = new FormData(form);
            const value = formData.get('myTextbox');
            document.getElementById('output')
                .innerText = "Enterd Value: " + value;
        }
    </script>
</body>
</html>

Conclusion

In this article to display value of textbox in JavaScript we have discussed two different approaches with three examples which are: by using value property and by using formData object.

Updated on: 2024-11-25T12:24:26+05:30

19K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements