提交表单时如何轻松阻止页面重新加载？答案

【问题标题】：How can I easily stop the page from reloading when submitting a form?提交表单时如何轻松阻止页面重新加载？
【发布时间】：2019-07-02 02:16:21
【问题描述】：

当我在表单上单击提交时，应该会弹出其他内容。但是当我点击提交时，它会重新加载页面，因此不会弹出。

我无法找到我正在寻找的答案。我还没有完成这个项目，所以如果它看起来不完整，那就是原因。

这是代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="header">
            <span class="siteheader">ChubbyMan'sMath.com</span>  
            <div class="title">Area Calculator</div>
    </div>

    <p class="question">What shape do you want to find the area of?</p>
    <p id="n1" onclick="showForm();">1. Square</p> <!-- answer --> <p id="squareanswer">The area is 100.</p>
    <p id="n2">2. Rectangle</p>
    <p id="n3">3. parallelogram</p>
    <p id="n4">4. Circle</p>
    <p id="n5">5. Triangle</p>
    <p id="n6">6. Rhombus</p>
    <p id="n7">7. Trapezoid</p>

    <form name="squareform" id="squareform">
        <input id="squareinput"   type="text" placeholder="x">
        <input type="submit" value="Submit" id="squarebutton" onclick="square()">
    </form>

</body>
<script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:900&display=swap" rel="stylesheet">
</html>

(CSS)

* {
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif; 
}

.header {
    width: 100%;
    height: 200px;
    background-color: rgb(62, 110, 243);
}

body {
    background-color: lightblue;
}

.siteheader {
    background-color: darkblue;
    font-size: 150%;
    color: white;
    position: absolute;
    left: 40px;
    top: 30px;
    padding: 10px;
}

.title {
    position: absolute;
    font-size: 300%;
    color: lightgray;
    left: 35%;
    top: 80px;
}

.question {
    position: absolute;
    font-size: 125%;
    left: 90px;
    top: 250px;

}

#n1 {
    position: absolute;
    left: 90px;
    top: 300px;
}

#n2 {
    position: absolute;
    left: 90px;
    top: 350px;
}

#n3 {
    position: absolute;
    left: 90px;
    top: 400px;
}

#n4 {
    position: absolute;
    left: 90px;
    top: 450px;
}

#n5 {
    position: absolute;
    left: 90px;
    top: 500px;
}

#n6 {
    position: absolute;
    left: 90px;
    top: 550px;
}

#n7 {
    position: absolute;
    left: 90px;
    top: 600px;
}

#squareform {
    position: absolute;
    left: 200px;
    top: 295px;
    display: none;  
}

#squareanswer {
    position: absolute;
    left: 400px;
    top: 295px;
    display: none;
}

(JAVASCRIPT

var n1 = document.getElementById('n1');
var n2 = document.getElementById('n2');
var squareInput = document.getElementById('squareinput').value;

function showForm () {
    document.getElementById('squareform').style.display  = "block";
};

function square() {
    document.getElementById('squareanswer').style.display  = "block";
};



n2.onclick = function rectangle() {

};

【问题讨论】：

在向用户显示弹出窗口之后，您应该阻止表单提交上的默认事件。
prevent form submission (javascript)的可能重复

标签： javascript html

【解决方案1】：

只需将return false 添加到onclick 事件：

<input type="submit" value="Submit" id="squarebutton" onclick="square(); return false;">

【讨论】：

【解决方案2】：

由于您没有使用任何表单处理程序，因此您不需要提交按钮类型。您可以简单地使用带有类型按钮的输入，它会正常工作。只需将提交按钮代码更改为以下-

&lt;input type="button" value="Submit" id="squarebutton" onclick="square()"&gt;

希望对你有帮助。

【讨论】：

【解决方案3】：

这是设计使然；这就是 HTML 表单的工作方式。当用户单击带有type="submit" 的表单中的按钮时，表单将提交到表单标记的action="" 属性中指定的页面。如果没有指定其他页面（或者如果省略该属性），则表单数据将发送到同一页面（即原始页面；即表单所在的页面） -这被视为页面刷新。

为避免这种（默认）行为，您可以中断提交过程并return false - 或者，您可以从使用表单切换到使用 AJAX。

How to interrupt the form submit process

What is AJAX and how to use it

Form submitting when clicked

Should I have One form or two seperate forms

【讨论】：

【解决方案4】：

如果您不想提交表单并且不想重新加载页面，您可以简单地对表单使用 novalidate 属性，它会为您工作。

    <form name="squareform" id="squareform" novalidate>
       <input id="squareinput"   type="text" placeholder="x">
       <input type="submit" value="Submit" id="squarebutton" onclick="square()">
    </form>

【讨论】：