使用 javascript 在 div 中显示输入字段值
show input field value in div using javascript
我有一个按钮,当我点击它时会显示一个表单,它有输入字段名称,我试图在提交表单后在另一个 div 中显示输入字段值。但我做不到。
我做错了什么?
<!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>
请帮助我,在此先感谢。
该值实际出现在 div
中,但您的表单会立即提交。逃避的一种方法是不使用提交按钮。将 input[type=submit]
更改为 button[type=button]
。
这将阻止提交表单。
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>
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>
我有一个按钮,当我点击它时会显示一个表单,它有输入字段名称,我试图在提交表单后在另一个 div 中显示输入字段值。但我做不到。 我做错了什么?
<!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>
请帮助我,在此先感谢。
该值实际出现在 div
中,但您的表单会立即提交。逃避的一种方法是不使用提交按钮。将 input[type=submit]
更改为 button[type=button]
。
这将阻止提交表单。
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>
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>