Why wouldn't my ajax run? No errors being thrown

Question

I am trying to get the idof the button when its clicked process it through AJAX like shown in index.php and just echoing it out simply.

Howevr when I do that PHP tells me that postid is an undefined index. What's the problem here please?

As I am new to AJAX I am following this youtube video.

Index.php:

<button type='submit' id=8 onclick='addToCart(this.id)'></button>

function addToCart($id) {
  var idStored = $id; //When the button is clicked it passes the id. Even .val() wouldn't work
  $.post('../Cart.phtml',{postid:idStored}, function(data){
    window.alert(data); //Just for testing and conforming the code runs.
  });
}

CartPage.php:

<?php
  $name = $_POST['postid'];
  echo $name;
?>

Many thanks, any help or guidance would be great.

`addToMyWishList` != `addToCart` Other things it could be: 1. Any function called from an old-fashioned `onxyz`-attribute handler has to be a global. Perhaps your function isn't global. 2. That button is a **submit** button. Normally, submitting a form refreshes the page, which will prevent the ajax call from completing (or, likely, even starting). — T.J. Crowder, Jan 24 '18 at 11:36
Sorry yes, my mistake I forgot to change that too. But still nothing. Is my syntax at least correct? — Jake James, Jan 24 '18 at 11:38
If your button is within a `form` then it's most likely that the form is being submit before the AJAX request is sent/completed and so gets aborted. — Rory McCrossan, Jan 24 '18 at 11:39
T.J. Crowder, sorry so how can I make my function global? Also, should I just remove the type = submit so the page doesn't refresh? — Jake James, Jan 24 '18 at 11:40
You'd need to set `type="button"` to stop the refresh for testing purposes, but I wouldn't do that in production. Hook to the `submit` event of the `form` using an unobtrusive handler instead of the `on*` event attribute. Then you can cancel the event using `preventDefault()`. — Rory McCrossan, Jan 24 '18 at 11:42
In which case check the console to see exactly what the content of your AJAX request is — Rory McCrossan, Jan 24 '18 at 11:49

score 0 · Answer 1 · answered Jan 24 '18 at 12:30

0

First send event object to the method like below:

<button type='submit' data-id="8" onclick='addToCart(event, this.id)'></button>

$.post send a ajax request with content-type application/json and the request object is NOT in form-data format and that is in request payload format.

function addToCart(e, $id) {
  e.preventDefault();
  var idStored = $id; //When the button is clicked it passes the id. Even .val() wouldn't work
  $.post('../Cart.phtml',{postid:idStored}, function(data){
    window.alert(data); //Just for testing and conforming the code runs.
  });
}

To read request payload in PHP do as below:

CartPage.php:

<?php
  // read request payload json data    
  $data = json_decode(file_get_contents('php://input'));
  $name = $data ['postid'];
  echo $name;
?>

answered Jan 24 '18 at 12:30

Ali Bahrami

5,935
3
34
53

Thank you for the constructive reply. When I do json_decode(file_get_contents('php://input')) inside the file get contents parameter. Am I suppose to leave it the same or change the directory location to were the function 'addToCart' is running. Because when I ran this and click on the button then click on the cart page, it's an empty page – Jake James Jan 24 '18 at 12:54
I didn't get what you mean, can you describe better? // if my answer helped you please don't forget to mark it as an answer. – Ali Bahrami Jan 24 '18 at 12:58
In your solution you told me to put this code in cartpage.php: . Where you have $data = json_decode(file_get_contents('php://input')); for the fileGetContents, should I change the parameter to point to index.php. Like so: $data = json_decode(file_get_contents('index.php'));. Because when I run your code and click on cart page nothing is outputted. I thought it was filegetcontents – Jake James Jan 24 '18 at 13:02

score 0 · Answer 2 · answered Jan 24 '18 at 12:49

0

Easiest way is using onClick() function.

//using form and type=”submit” is not needed
<button id=8 onclick='addToCart(this.id)'></button>

But if you want to do it through form, you have to prevent the default behavior of the form.

$("#cartForm").submit(function (e) {
    e.preventDefault();

});

answered Jan 24 '18 at 12:49

dilusha_dasanayaka

1,401
2
17
30

Thank you. I changed my button options to that. And when I click on the button an alert saying "" comes up. When I clicked on the cart page it fails to recognize postid – Jake James Jan 24 '18 at 13:00
Try using $.ajax() method instead of $.post() study this question : https://stackoverflow.com/questions/19600596/get-the-return-value-of-a-html-form-post-method – dilusha_dasanayaka Jan 24 '18 at 13:21

Why wouldn't my ajax run? No errors being thrown

2 Answers2