show input field value in div using javascript
Question
I have a button, when I click on it a form is shown, It has and input field name, I am trying to display input field value in a another div after submitting the form. But I am unable to do it. What I am doing wrong?.
<!DOCTYPE html>
<html>
<head>
<script>
function showDiv() {
document.getElementById('hello').style.display = "block";
}
function showValue(){
var name = document.getElementById('name').value;
document.getElementById('ans').innerHTML = name;
}
</script>
</head>
<body>
<input type="button" onclick="showDiv()" value="click on me"/>
<form id="hello" style="display:none;">
<label>Enter Name: </label><br>
<input type="text" id="name" required>
<input type="submit" value="submit" onclick="showValue()">
</form>
<div id="ans"></div>
</body>
</html>
Please help me, thanks In advance.
2 answers
solution1
2 ACCPTED 2018-08-01 08:19:44
The value actually appears in the div but your form submits immediately. One way to get away is to not use submit button. Change input[type=submit] to button[type=button] .
This will prevent the form from being submitted.
function showDiv() { document.getElementById('hello').style.display = "block"; } function showValue() { var name = document.getElementById('name').value; document.getElementById('ans').innerHTML = name; document.getElementById('hello').style.display = "none"; }
<input type="button" onclick="showDiv()" value="click on me" /> <form id="hello" style="display:none;"> <label>Enter Name: </label><br> <input type="text" id="name" required> <button type="button" onclick="showValue()">submit</button> </form> <div id="ans"></div>
solution2
0 2021-03-25 07:57:54
function showDiv() { document.getElementById('hello').style.display = "block"; } function showValue() { var name = document.getElementById('name').value; document.getElementById('ans').innerHTML = name; document.getElementById('hello').style.display = "none"; }
<input type="button" onclick="showDiv()" value="click on me" /> <form id="hello" style="display:none;"> <label>Enter Name: </label><br> <input type="text" id="name" required> <button type="button" onclick="showValue()">submit</button> </form> <div id="ans"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Trying to show a div if the input value of a form field is empty, using jQuery
Hide and show a div using input value using JavaScript
Get input field value and display it in a div using javascript
Hide or Show div based on input field value
Can javascript “show” a field's input value?
Hide the input field div class using javascript
How can I get my input value from input field in a div using JavaScript
How to create a function using javascript which will check a field value/user input and show alert if the input is correct?
show/hide div when input field is empty(jquery, javascript)
How to show a div if input field value is empty but contains a variable?
Related Tags