使用 Javascript 打印表单 - 文本立即消失答案

【问题标题】：Print out form with Javascript - Text disappears right away使用 Javascript 打印表单 - 文本立即消失
【发布时间】：2016-01-18 20:46:11
【问题描述】：

我的 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>

【问题讨论】：

没有指定类型的按钮作为默认操作提交表单。

标签： javascript html

【解决方案1】：

button 元素默认为type="submit" (yes, really)。由于您的按钮位于form 中，因此它会提交表单。由于表单没有明确的action 属性，它会将自己提交到当前页面的URL，并刷新页面。

将type="button" 添加到按钮，或删除form。

【讨论】：

【解决方案2】：

此按钮提交表单。在此处添加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>

【讨论】：

【解决方案3】：

<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> 标签。

【讨论】：

【解决方案4】：

    <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>

使用return来阻止它提交表单

【讨论】：

【解决方案5】：

在您的表单中，按钮默认被视为“提交”类型。为了防止这种情况发生，请在按钮上使用 type="button"。

希望这会有所帮助:)

【讨论】：