按钮不应该调用php函数[重复]

Question

我创建了一个 html 页面，其中显示了有关已登录用户的信息，在信息附近有一个打开表单的按钮：

<h1 class="personal">Il mio profilo: <button class="add_btn" onclick="mod()">Modifica</button></h1>
    <div class="mobile-screen" id="modform" style="display: none">
        <form action="modifica.php" method="post" id="mod-form">
            <table>
                <button class="login-btn" onclick="mod()">Chiudi</button>
                    <tr>
                        <input type="text" name="memail" id="memail" placeholder="E-Mail">
                    </tr>
                    <tr>
                        <input type="text" name="mpass" id="mpassword" placeholder="Password">
                        <input type="text" name="mmphone" id="mmphone" placeholder="Cellulare">
                    </tr>
                    <tr>
                        <input type="submit" class="login-btn" name="mod" id="signup-btn" value="Modifica">                             
                    </tr>
            </table>
       </form>
   </div>

在这个表单中，我添加了一个按钮，应该通过调用 js 函数来关闭它。

这是按钮：

<button class="login-btn" onclick="mod()">Chiudi</button>

这是调用的JS函数

function mod(){
    var y = document.getElementById("modform");
    if (y.style.display === "none") {
        y.style.display = "block";
    }else{
        y.style.display = "none";
    }
}

每次我单击该按钮时，它都会调用 modifica.php 文件

知道为什么会这样吗？

修改按钮如下：

<button type="button" class="login-btn" onclick="mod()">Chiudi</button>

但它仍然调用modifica.php

Answer 1

默认情况下，表单中的<button> 将被视为提交按钮（因此将表单提交给任何操作，在本例中为modifica.php），以避免将类型属性设置为按钮。

<button type="button" class="login-btn" onclick="mod()">Chiudi</button>