Javascript 提交表单时，如何轻松阻止页面重新加载？_Javascript_Html

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

javascript html

Javascript 提交表单时，如何轻松阻止页面重新加载？,javascript,html,Javascript,Html,当我在表单上单击submit时，应该会弹出其他内容。但是当我点击submit时，它会重新加载页面，这样东西就不会弹出我还没有找到我正在寻找的答案。我还没有完成这个项目，所以如果它看起来不完整，那就是原因这是代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

当我在表单上单击submit时，应该会弹出其他内容。但是当我点击submit时，它会重新加载页面，这样东西就不会弹出

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

这是代码

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

（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() {

};

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

这是设计；这是HTML表单的工作方式。当用户单击带有

type=“submit”

的表单中的按钮时，表单将提交到表单标签的

action=“

属性中指定的页面。如果未指定其他页面（或省略该属性），则表单数据将发送到同一页面（即，原始页面；即表单所在的页面）-这被视为页面刷新

为了避免这种（默认）行为，您可以中断提交过程并

返回false

——或者，您可以从使用表单切换到使用AJAX

如果您不想提交表单，也不想重新加载页面，您只需对表单使用novalidate属性，它将为您提供帮助

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

只需将

返回false

添加到

onclick

事件：

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

在向用户显示弹出窗口后，应防止表单提交时出现默认事件。可能存在重复的

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