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;
    } 

`

這是我的表單 header 和提交按鈕，當我可以成功提交表單但無法加載結果頁面時

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

這是 php 代碼，用於將表單中的數據插入我的數據庫<?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 object 並調用preventDefault()方法以防止表單提交的默認行為。 之后調用window.location.href引導用戶到相關頁面。

例如：

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