用Javascript打印輸出表單 - 文字馬上消失

我在使用JavaScript時遇到了一些麻煩，它應該打印出您寫入表單的任何信息，並且它會立即消失。無法弄清楚我在這裏做錯了什麼，請幫忙！用Javascript打印輸出表單 - 文字馬上消失

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Javascript</title> 
</head> 
<body> 

    <h1>Personal Data</h1> 

    <p>Fill in your name in the form below:</p> 
    <form> 
     <fieldset> 
      First name <input id="fname" type="text"><br> 
      Last name <input id="lname" type="text"><br> 
      Age <input id="age" type="number" value="0"><br> 
      <button onclick="myFunction()">Click</button><br> 
      <p id="demo"></p> 
      <script> 
       function myFunction() { 
        var age = document.getElementById("age").value; 
        var lname = document.getElementById("lname").value; 
        var fname = document.getElementById("fname").value; 
        document.getElementById("demo").innerHTML = "<p>My name is " + fname + " " + lname + " and I am " + age + " years old!</p>"; 
       } 
      </script> 
     </fieldset> 
    </form> 

</body> 
</html>

來源

2016-01-18 Alex

沒有指定類型的按鈕將提交表單作爲默認操作。 – Teemu

button元件是，默認情況下，type="submit"（yes, really）。由於您的按鈕位於form中，因此它會提交表單。由於該表單沒有明確的action屬性，因此它將自身提交到當前頁面URL，刷新頁面。

將type="button"添加到按鈕，或刪除form。

來源

2016-01-18 12:31:23

像魅力一樣工作，謝謝！ – Alex

<button onclick="myFunction()">Click</button>

這導致您的表單提交（這會導致你的JavaScript控制檯來清除）。

你可以從myFunction()return false;或者你可以做onclick="myFunction(); return false;或取消事件或任何其他事情。

How do I cancel form submission in submit button onclick event?

How to prevent form from being submitted?

您還可以添加type="button"到按鈕或消除<form>標籤。

來源

2016-01-18 12:33:14 mikeb

此按鈕提交表格。在那裏添加一個return false，可以防止發生這種提交。所以，你的代碼應該是：

function myFunction() { 
    var age = document.getElementById("age").value; 
    var lname = document.getElementById("lname").value; 
    var fname = document.getElementById("fname").value; 
    document.getElementById("demo").innerHTML = "<p>My name is " + fname + " " + lname + " and I am " + age + " years old!</p>"; 
    return false; 
}

而在HTML：

<button onclick="return myFunction()">Click</button><br>

來源

2016-01-18 12:34:14

<form> 
      <fieldset> 
       First name <input id="fname" type="text"><br> 
       Last name <input id="lname" type="text"><br> 
       Age <input id="age" type="number" value="0"><br> 
       <button onclick="return myFunction()">Click</button><br> 
       <p id="demo"></p> 
       <script> 
        function myFunction() { 
         var age = document.getElementById("age").value; 
         var lname = document.getElementById("lname").value; 
         var fname = document.getElementById("fname").value; 
         document.getElementById("demo").innerHTML = "<p>My name is " + fname + " " + lname + " and I am " + age + " years old!</p>"; 
return false; 
        } 
       </script> 
      </fieldset> 
     </form>

使用回，以防止它提交表單

來源

2016-01-18 12:35:38 WisdmLabs

內部窗體，按鈕被認爲是「提交「默認輸入。爲了防止這種使用鍵入=「按鈕」與按鈕。

希望這會有所幫助:)

來源

2016-01-18 12:46:11 Tal

用Javascript打印輸出表單 - 文字馬上消失

回答

相關問題