TacTube

Posts

How to get input text field using HTML and JavaScript | DzQ39 |

This is a quick example of how to get the input value from the input text filed, display it and reset it back to the original content.

Code

<!DOCTYPE html>
<html>
<body>

Enter something: <input type="text" id="myText" value="" placeholder="Enter anything">

<p>Enter anything in the above field and click on the Submit button to display the value of the value attribute of the text field.</p>
<p>To clear, click on the Reset button.</p>

<button onclick="getInputText()">Submit</button>
<button onclick="resetInputField()">Reset</button>

<p id="demo"></p>

<script>
function getInputText() {
    var x = document.getElementById("myText").value;
    document.getElementById("demo").innerHTML = x;
}

function resetInputField() {
    document.getElementById("myText").value = "";
    document.getElementById("myText").placeholder = "Enter anything";
    document.getElementById("demo").innerHTML = "";
}

</script>
</body>
</html>

Result

Reference:

https://www.w3schools.com/jsref/prop_text_value.asp

https://www.w3schools.com/tags/att_input_placeholder.asp