2017/03/08

How to get input text field using HTML and JavaScript

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




 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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
Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)