表单提交后阻止页面刷新 (e.preventDefault();) 不起作用

Question

我想在用户提交表单后停止页面刷新。 问题是它似乎不起作用。 PHP：

<?php 
    function displayimage() {
        $con = mysqli_connect("localhost", "root", "", "cookbook");
        $result = mysqli_query($con, "SELECT * FROM product");
        
        while ($row = mysqli_fetch_array($result)) {
            echo "<img src='uploads/".$row['image']."' class='imageaaa'>";
        }
        
        mysqli_close($con);
    }

    function addrecipe() {
        
        $con = mysqli_connect("localhost", "root", "", "cookbook");
            
        if (isset($_POST["Add"])) {
            
            if (!empty($_POST["Name"])
               ){
                    
                $name = $_POST["Name"];
                $type = $_POST["Type"];
                $image = $_FILES['Image']['name'];
                $date = date("d.m.Y, G:i");

                $sql = "
                INSERT INTO
                product(`name`, `type`, `image`, `date`) 
                VALUES('$name', '$type', '$image', '$date');
                     // More Insert Into queries
                ";

                $target = "uploads/".basename($image);

                if (move_uploaded_file($_FILES['Image']['tmp_name'], $target)) {
                    $msg = "Image uploaded successfully";
                } else {
                    $msg = "Failed to upload image";
                }

                $var = mysqli_multi_query($con,$sql);

                if($var){
                    echo "good";
                } else {
                    echo "bad";
                }    
                
            } else {
                echo "Fill in the form";
            }

        }  
 
        mysqli_close($con);     
    }
?>

HTML：

<?php
  addrecipe();
  displayimage();
?>

<form method="POST" id="form" enctype='multipart/form-data'>
                            
Name:
<input type="text" name="Name" value="<?php echo isset($_POST['Name'])?htmlspecialchars($_POST['Name'], ENT_QUOTES):'';?>"><br>
Type:
<select name="Type" required>
  <option value="dishes" disabled selected hidden required>Wybierz typ</option>
  <option value="dishes">Dania</option>
  <option value="desserts">Desery</option>
  <option value="snacks">Przekąski</option>
</select><be>

Image (jpg, png):                       
<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('upload_image').click();" />
<input type="file" style="display:none;" id="upload_image" name="Image">
<br><be>

<!-- More text inputs -->

<button name="Add" id="add">sdfsdfsd</button>
                            
<script>
  $("#add").submit(function(e) {
    e.preventDefault();
  });
</script>

</form>

我已经尝试了一些东西，但似乎没有任何效果。 一切正常，数据已发送到数据库，但我无法摆脱此页面重新加载。 我做错什么了吗？ 如果有更好的解决方案，我很想知道。 另外，我有这个js代码：

    <script>
        if (window.history.replaceState){
            window.history.replaceState(null, null, window.location.href);
        }
    </script>

在我的 HTML 标记之后，删除它不会改变任何内容。 它会在您刷新页面之前禁用重新提交表单弹出窗口。 有什么办法可以在表单提交后禁用页面刷新？

Answer 1

<script>标签应该在<form>标签之外并且应该包含#form而不是#add

...
</form>
<script>
  $("#form").submit(function(e) {
    e.preventDefault();
  });
</script>

.submit()方法应用于表单元素。

您也可以通过简单地从规范中提到的处理程序返回false来实现相同的目的。

...
</form>
<script>
  $("#form").submit(() => false);
</script>