javascript - window.location.href doesn't work with a form submit button

Question

I'm trying to create a voting compass where I'm attempting to submit a form and insert the answers to a database, and then take the user to a results page. When I have a submit button, I'm able to successfully store the answers but the page just refreshes rather than taking them to the results page.

However, if I change the submit button to the following:

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

I can successfully take the user to the results page, but the answers to the form are not stored to my database.

I'm stuck and have no idea how to approach this, any help would be appreciated.

Here's the code for generating the results

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

`

Here is my form header and submit button when I can submit the form successfully but fail to load the results page

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

Here is the php code to insert the data from the form to my database <?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 "";
            }

?>

question from:https://stackoverflow.com/questions/65878455/window-location-href-doesnt-work-with-a-form-submit-button

Answer 1

First, attach a submit event listener to the form. After this call retrieve the event object and call the preventDefault() method to prevent the default behavior of the form submission. After this call the window.location.href to guide the user to the relevant page.

eg:

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