Question

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

Answer 1

默认情况下，

select DATE_FORMAT(date, '%d-%m-%Y') as BIRTHDATE FROM cs_user元素为button（yes, really）。由于您的按钮位于type="submit"，因此会提交表单。由于表单没有明确的form属性，因此它会将自己提交到当前页面URL，刷新页面。

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

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

Answer 3

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

这会导致您的表单提交（这会导致您的javascript控制台清除）。

您可以return false;来自myFunction()，也可以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>代码。

Answer 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来阻止它提交表单

Answer 5

在表单中，按钮被视为＆＃34;提交＆＃34;默认情况下输入。为防止这种情况，请使用type =＆＃34; button＆＃34;用按钮。

希望这会有所帮助：）

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

5 个答案: