AJAX error when passing a variable to a PHP file

Question

How my page works:

The quiz php page loads and the user generates a score with a function inside quiz.js. The score is then saved in a variable score inside quiz.js
After generating the score, the user has to press a button to go to the next question in the quiz inside the same page. Pressing the button would send the score to my database with a sql query I have in sendData.php, without reloading the page.

My button looks like this:

<form id="sendData" action="sendData.php" method="post">
  <button type="submit" name="send" onclick="sendAjax()">Send</button>
</form>

sendData.php is already finished and working, but for some reason, sendAjax() doesn't work at all:

function sendAjax() {
  $.ajax({
    url:  "sendData.php",
    type: "POST",
    data: {
      score: score,
      numQuiz: numQuiz
    },
    success: function() {
      alert("Data succesfully sent");
    },
    error: function() {
      alert("There has been an error");
    }
  })
}

And my PHP file being like this:

if (isset($_POST['score']) and isset($_POST['numQuiz'])) {
    $score = $_POST['score'];
    $numQuiz = $_POST['numQuiz'];
    // SQL query and stuff goes here
}

But it seems that $_POST['score'] and $_POST['numQuiz'] aren't set. Also, I can see the error pop up inside sendAjax before it loads the PHP file. I've tried adding to the form the attribute action="" but it doesn't work either.

You have to do .preventDefault(). Try adding an ID to the button, remove onclick and in js: $('#my-btn').on('click', function(e) { e.preventDefault() /* $.ajax(...) */ }) — Sebastian Kaczmarek
– Sebastian Kaczmarek, Commented Feb 20, 2019 at 10:55
I tried it, you can see my post's edit. But it's not working either — ratuwipuy
– ratuwipuy, Commented Feb 20, 2019 at 11:03
Are you sure the url is correct? I mean, isn't it 404 error? What do you see in the Network tab in the Chrome DevTools? — Sebastian Kaczmarek
– Sebastian Kaczmarek, Commented Feb 20, 2019 at 11:05

Quentin · Accepted Answer · 2019-02-20 11:26:40Z

2

<form id="sendData" action="sendData.php" method="post">
  <button type="submit" name="send" onclick="sendAjax()">Send</button>
</form>

You're running the JS when you click a submit button in a form.

So the JS runs, then the browser immediately navigates to a new page (submitting the form, with no data in it, to the PHP) and the XMLHttpRequest object is destroyed before it receives a response.

You then see the result of the standard form submission.

If you just want a button to trigger some JavaScript, then use a non-submit button (<button type="button"), and don't put it in a form.

Better yet:

switch away from onclick attributes (they have a variety of issues) in favour of addEventListener providing a submit event listener on the form
Use preventDefault() to stop the form submission when the JS is successful
Put form controls in the form so it submits useful data when the JS isn't successful

i.e. write Unobtrusive JavaScript then provides Progressive enhancement.

answered Feb 20, 2019 at 11:26

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ratuwipuy Over a year ago

Okay, so the page at least doesn't refresh now. I've chenged my button to a normal one and my function to $('#buttonID').click(function(e) { e.preventDefault(); but it does nothing now. Thanks for the links, by the way. I'm still using onlick for the button though

Quentin Over a year ago

@ratuwipuy — Open the developer tools in your browser. Look at the Console. Click the button. See what errors come up. I expect something about $ being undefined.

ratuwipuy Over a year ago

Okay so after adding $(document).ready(function() { before the click handler it works. Although the error message still pops up... Nothing in the console by the way. It's an error inside the ajax function

ratuwipuy Over a year ago

I've edited my post with exactly what I have, if you want to check it

Quentin Over a year ago

You mean alert("Error al pasar datos") runs? Look at the arguments to the error function. There's some reason it is failing.

|

yomateo · Accepted Answer · 2019-02-20 11:20:47Z

-1

Two things:

You need to tell jQuery to use the application/json content-type:

function sendAjax() {
  $.ajax({
    url:  "sendData.php",
    type: "POST",
    contentType: 'application/json',
    dataType: 'json',
    data: {
      score: score,
      numQuiz: numQuiz
    },
    success: function() {
      alert("Data succesfully sent");
    },
    error: function() {
      alert("There has been an error");
    }
  })
}

PHP's $_POST variable is not populated as you think it is as the payload is not urlencoded as is standard with say a form submit. So we can parse the JSON payload (body) ussing:

$myData = json_decode(file_get_contents("php://input"));
var_dump($myData->score);

answered Feb 20, 2019 at 11:20

yomateo

2,41716 silver badges18 bronze badges

4 Comments

Quentin Over a year ago

Your JS is claiming to be sending JSON, and your PHP is trying to parse JSON, but you're sending URL Form Encoded data, so that will fail.

ratuwipuy Over a year ago

What does json have to do with this? I get Notice: Trying to get property '' of non-object in /opt/lampp/htdocs/test/sendData.php on line 10 NULL

yomateo Over a year ago

@quentin good catch! thank you.. we'd want to JSON.stringify(..) of course

Quentin Over a year ago

Changing code that sends form encoded data, which claims to be form encoded data, to somewhere which expects form encoded data to code that sends JSON encoded data, which claims to be JSON encoded data, to somewhere which expects JSON encoded data … is pretty pointless and doesn't solve the problem.

Collectives™ on Stack Overflow

AJAX error when passing a variable to a PHP file

2 Answers 2

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related