使用javascript在div中显示输入字段值

Question

我有一个按钮，当我点击它时会显示一个表单，它有一个输入字段名称，我试图在提交表单后在另一个 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>

请帮助我，提前致谢。

Answer 1

该值实际上出现在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>

Answer 2

 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>

使用javascript在div中显示输入字段值

问题描述

2 个解决方案

解决方案1
2 已采纳 2018-08-01 08:19:44

解决方案2
0 2021-03-25 07:57:54

使用javascript在div中显示输入字段值

问题描述

2 个解决方案

解决方案1 2 已采纳 2018-08-01 08:19:44

解决方案2 0 2021-03-25 07:57:54

解决方案1
2 已采纳 2018-08-01 08:19:44

解决方案2
0 2021-03-25 07:57:54