Javascript/Ajax not sending form data to php file

Question

For context i'm trying to make a simple quiz of sorts. There are two button:

1. Confirm Button : to check if answer selected is correct.
2. Next Button : used to go to next the question ( The button is disabled, and should be disabled until confirm is selected and answer is checked correctly ).

The selected answer is checked through a php file. I'm trying to use ajax because my thought is that page reload is preventing Next Button from becoming enabled when Confirm Button is clicked.

My problem here is that ajax does not seem to be sending the form data to the php file as i'm not getting any output from the php file, even though the php file works fine without ajax.

Here is my code:

1- experiment_content.php: ( this is where the quiz form is)

 <!-- FORM START -->
    <form id='stepform' method="post">
    <ul>
<?php
$result = mysqli_query($dbc, "SELECT * FROM step_answers WHERE step_id=$stepnum");
while ($row = mysqli_fetch_array($result)): ?>
    <li><input name="answer" type="radio" value="<?php echo $row['ans_number'] ?>"/><?php echo $row['ans_description']; ?></li>
<?php endwhile;?>
    </ul>
    <br>
     <!-- display Correct / Incorrect / Missing statements -->
    <span id="statement"><?php echo $statement ?></span>
    <br>

    <button type="Button" id="confirm">confirm</button>
    <button type="button" id="nextbtn" onclick="changeaction('next_step.php')">Next</button>

    <!-- send stepnum and experiment id to php files on submit -->
    <input type="hidden" id = "stepnum" name="stepnum" value="<?php echo $stepnum ?>"/>
    <input type="hidden" id = "id" name="id" value="<?php echo $id ?>"/>
    </form>

(id and stepnum are from GET variable, i need them sent to check_step_answer.php for further queries).

2-script.js:

document.getElementById('confirm').addEventListener('click', getanswer);

function getanswer(e){
e.preventDefault();

var answer = document.querySelector('input[name="answer"]:checked').value;
var stepnum = document.getElementById('stepnum').value;
var id = document.getElementById('id').value;
var param = "answer="+answer+"&stepnum="+stepnum+"&id="+id;
console.log(param);
var xhr = new XMLHttpRequest();

xhr.onload = function(){console.log(this.status);}

xhr.onerror = function(){console.log("error");}

xhr.open('POST','check_step_answer.php', true);

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

xhr.send(param);
}

3-check_step_answer.php:

<?php
include_once 'db_connect.php';

$statement = '';

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $stepnum = $_POST['stepnum'];
    $expid = $_POST['id'];
    // get correct answer
    $result = mysqli_query($dbc, "SELECT * FROM experiment_steps WHERE exp_id=$expid AND step_num=$stepnum") or die($dbc->error . __LINE__);
    $row = mysqli_fetch_array($result);
    $correct_ans = $row['correct_ans'];

    //check if answer is correct or empty
    if (isset($_POST['answer'])) {
        if ($_POST['answer'] == $correct_ans) {
            $statement = 'correct';
        } else {
            $statement = 'incorrect';
        }
    } else {
        $statement = "select something";
    }
}

(i have check_step_answer.php included in experiment_content.php to display $statement on the page)

I have only included the relevent code, please tell if further explanation is required :)

I'm also still fairly new to php and ajax so i'm sure its a stupid mistake. and if there are things i can improve with the code , please do tell<3.

Thank you very much.

Answer 1

You have to save the XML request return in a variable then use it. Actualy you're not using or calling the request return anywhere ! You can execute some action using given text/data return in xhr.onload = function(){} , exemple :

xhr.onload = function(){
let requestReturn = xhr.responseText;
console.log(requestReturn) ;
}