window.location.href 不适用于表单提交按钮

Question

我正在尝试创建一个投票指南针，我正在尝试提交表单并将答案插入数据库，然后将用户带到结果页面。当我有一个提交按钮时，我能够成功存储答案，但页面只是刷新而不是将它们带到结果页面。

但是，如果我将提交按钮更改为以下内容：

<img src="../pics/process.png" style="border:none; " onclick="Sort();">

我可以成功地将用户带到结果页面，但表单的答案没有存储到我的数据库中。

我被卡住了，不知道如何解决这个问题，我们将不胜感激。

这是生成结果的代码

`<script type="text/javascript">
    function Sort() {
        //australia
        var party1= 0;
        var party2= 0;

        if (compass.q1[0].checked == true) {
            party1 += 1;
        } else if (compass.q1[1].checked == true) {
            party2 += 1;
        } else {
            alert("Please answer question 1.");
            return;
        }

        if (compass.q2[0].checked == true) {

            party1 += 1;
        } else if (compass.q2[1].checked == true) {
            party2 += 1;
        } else {
            alert("Please answer question 2.");
            return;
        }

        window.location.href = "./australiacompassresult.php?" + party1+ "&" + party2;
    } 

`

这是我可以成功提交表单但无法加载结果页面时的表单标题和提交按钮

<form id="compassform" name="compass" method="post">
<input type="submit" value="Submit">

这是将表单中的数据插入我的数据库的 php 代码

    $link = mysqli_connect("localhost","username","password", "database");

        if (mysqli_connect_error()) {
    
            die ("There was an error connecting to the database");
    
        }    
            $query = "INSERT INTO `users` (`q1`, `q2`, `q3`, `q4`, `q5`, `q6`, `q7`, `q8`) VALUES ('".mysqli_real_escape_string($link, $_POST['q1'])."', '".mysqli_real_escape_string($link, $_POST['q2'])."','".mysqli_real_escape_string($link, $_POST['q3'])."','".mysqli_real_escape_string($link, $_POST['q4'])."','".mysqli_real_escape_string($link, $_POST['q5'])."','".mysqli_real_escape_string($link, $_POST['q7'])."','".mysqli_real_escape_string($link, $_POST['q7'])."','".mysqli_real_escape_string($link, $_POST['q8'])."')";
            
            if (mysqli_query($link, $query)) {
                
                echo "";
            }

?>

Answer 1

首先，将submit 事件侦听器附加到表单。在此调用之后检索event 对象并调用preventDefault() 方法以防止表单提交的默认行为。在此之后调用window.location.href 将用户引导到相关页面。

例如：

document.getElementById("form").addEventListener("submit",(e) => {
        e.preventDefault()
        window.location.href = "./australiacompassresult.php?" + party1+ "&" + party2;
});