Read Data From Input Element Using Javascript

By Posted on

Get String, Number and Date From Input, Then Show In Alert

In this article I will guide how to Read Data like String, Number and Date From Input element HTML using javascript and show data in Alert.

The method is quite easy, we need to use the “document.getElementById()” command get input value by id on button click javascript

For example, I have an input form and a click button with the following line of code: 

<body>
    <div class="container">
        <label for="inputName">Name: </label>
        <input type="text" name="inputName" id="inputName">
        <br>
        <label for="inputAge">Age:</label>
        <input type="number" name="inputAge" id="inputAge">
        <br>
        <label for="inputDate">Date:</label>
        <input type="date" name="inputDate" id="inputDate">
        <br>
        <button onclick="getData()">Click to show in Alert</button>
    </div>
</body>

If I input the data it will look like this:

Read String, Number and Date Javascript from Input element

And when I click the “Click to show in Alert” button an alert will appear like this:

Read Data From Input Element Using Javascript

For the javascript program code to be able to call the data that is in the input element is like this: 

<script>
    function getData() {
        var name = document.getElementById('inputName').value;
        var age = document.getElementById('inputAge').value;
        var date = document.getElementById('inputDate').value;
        alert(name + "\n" + age + "\n" + date);
    }
</script>

To be able to display data neatly in alerts, we use the New Line Alert Box and to adjust label read more at Set Widht Height Label HTML.

Hopefully this Read Data From Input Element Using Javascript article is useful.