Why does the Jquery in my header prevent my PHP code from working?

Question

I have a series of radio buttons. When I select a button and press submit, I want two things to happen: 1. checkmarks should appear (done with a Jquery script in the header) 2. a mysql database should update the user's score, which in turn changes the color of the square (done with a PHP script in the body)

The problem is that when the jquery script is present, the checkmarks appear but the database doesn't update. When I remove the jquery script, however, the database successfully updates. They jquery script is preventing the PHP code from running and I'm not sure why

JQUERY SCRIPT:

<script type='text/javascript'>

    `$(document).ready(function () {`
$('#questionform').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        url : $(this).attr('action') || window.location.pathname,
        type: "POST",
        data: $(this).serialize(),
        success: function (data) { 

                 if ($('input[name=functions_question]:checked').val()  == 2)                
{

                         $("#correctanswermarkwhengotright").fadeIn('slow');
  $(".incorrectanswermark").fadeIn('slow');

    // I THINK THIS IS WHERE THE PHP CODE NEEDS TO GO TO FIX THE PROBLEM BUT I DON'T KNOW HOW TO INTEGRATE IT

                 } else {
                         $("#correctanswermarkwhengotwrong").fadeIn('slow');
    $(".incorrectanswermark").fadeIn('slow');
                 }
        },
    });
});
});
</script>

PHP SCRIPT:

<?php  
    $id = $_SESSION['id'];
    $ress = $db->query("SELECT 1 FROM answers WHERE user_id=$id AND question_group='Functions'");
    if($ress->num_rows==0){
        $db->query("INSERT INTO answers VALUES(NULL, $id, 'Functions', 0)");
    }
    if(isset($_POST['functions_question'])){
    $res = $db->query("SELECT score FROM answers WHERE id=$id AND  question_group='Functions'");
    $data = $res->fetch_array();
        if($_POST['functions_question']==$_SESSION['functions_question']){
        if($data['score']<2)$db->query("UPDATE answers SET score = score+1 WHERE id=$id AND question_group='Functions'");
    }else{
        if($data['score']>-2)$db->query("UPDATE answers SET score = score-1 WHERE id=$id AND question_group='Functions'");
        }
    }
    ?>

You can see this code in action here: carouseltest.byethost8.com/onanswersubmittest.php You can login with the username: mail@test.com and password: test

If someone can explain how to integrate the PHP with the Jquery so that both actions work, I would appreciate it. Thank you!

Answer 1

You're trying to test every logic of your code at once. It's quite complicated. You need to test your code step by step.

1)Try to comment everything inside ajax success handler and see what's happening (fadein and fadout logic).

2) Try to test your ajax handler (the .php file). Comment everything insde this file and echo the $_SESSION['functions_question'] and $_SESSION['id']. If they return values then go to the next step.

3) Uncomment only this chunk of code

    $ress = $db->query("SELECT 1 FROM answers WHERE user_id=$id AND question_group='Functions'");
if($ress->num_rows==0){
    $db->query("INSERT INTO answers VALUES(NULL, $id, 'Functions', 0)");
}

If it works and returns what you need. And it writes data to your database correctly then go to the next step.

4)Uncomment this code.

if(isset($_POST['functions_question'])){
$res = $db->query("SELECT score FROM answers WHERE id=$id AND  question_group='Functions'");
$data = $res->fetch_array();
    if($_POST['functions_question']==$_SESSION['functions_question']){
    if($data['score']<2)$db->query("UPDATE answers SET score = score+1 WHERE id=$id AND question_group='Functions'");
}

If it returns what you need and update your database table correctly then go to the next step.

5) Uncomment the last chunk of your code

else{
    if($data['score']>-2)$db->query("UPDATE answers SET score = score-1 WHERE id=$id AND question_group='Functions'");
    }

Test it the same way you tested previous code.

This will help debug your code.