php Question posted in
Official manual can be found here.

Ajax send response successfully but PHP dont receive data

I have a shopping cart page and button like

`<button class="purchase-button" data-courses-id="<?php echo $coursesID; ?>" onclick="Payment()">
</button>`

so when user click on it, the payment form will show and I want to get the ID of the product to display.
This is the js file:

`
function Payment() {
  document.querySelector(".body-payment").style.display = "flex";
  document.body.style.overflow = "hidden";

  document.querySelectorAll(".purchase-button").forEach((button) => {
    button.addEventListener("click", (event) => {
      const courseID = button.getAttribute("data-courses-id");
      const data = { courseID: courseID };
      $.post("payment.php", data)
        .done(function (response) {
          console.log("Payment data sent successfully:", data);
        })
        .fail(function (error) {
          console.error("Error sending payment data:", error);
        });
    });
  });
}

`

The ajax work fine, it send data, but PHP dont:

`
if (isset($_POST['courseID'])) {}
else echo "Error";
`

I try print the SERVER and POST like:

`
print_r($POST);
`

and the output I got is array empty.

I guess that I dont have a form tag, and maybe the button is clicked twice. Please help me!

Tags:

3

Answers


  1. 0

    You can try this way

    • Add the event listener when the DOM is ready, rather than waiting for the ‘payment’ function to be called, move the event listener outside the ‘payment’ function.
    • Trigger the ‘payment’ function directly inside the event listener
    Login or Signup to reply.
  2. 0

    Check this without php code. And there is not sending, but logging in console:

    <!DOCTYPE html>
    <html>
    <head>
      <title>tytuł</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    </head>
    <body>
    <button class="purchase-button" data-courses-id="5" onclick="Payment()">button
    </button>
    </body>
    <script type="text/javascript">
    function Payment() {
      document.querySelectorAll(".purchase-button").forEach((button) => {
        button.addEventListener("click", (event) => {
          const courseID = button.getAttribute("data-courses-id");
          const data = { courseID: courseID };
          console.log(data);
        });
      });
    }
    </script>
    </html>

    I think problem is in js. When you click first time is nothing. In second time there is ‘5’. Third time it shows ‘5’ twice..

    proper solution (after our comments bellow, just in your code delete function declaration and closing function tag and onclick="Payment()"):

    <!DOCTYPE html>
    <html>
    <head>
      <title>tytuł</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    </head>
    <body>
    <button class="purchase-button" data-courses-id="5">button
    </button>
    </body>
    <script type="text/javascript">
      document.querySelectorAll(".purchase-button").forEach((button) => {
        button.addEventListener("click", (event) => {
          const courseID = button.getAttribute("data-courses-id");
          const data = { courseID: courseID };
          console.log(data);
        });
      });
    </script>
    </html>
    Login or Signup to reply.
  3. 0

    Your code has some problems:

    1. You put Payment() function to be executed on button click

    2. Inside of this Payment() function you put another click listener which appends new click listener each time the button is clicked

    3. php code of payment.php

      if (isset($_POST[‘courseID’])) {}
      else echo "Error";

    does nothing if post variable courseID is set.

    modified code:

    html:

    <button class="purchase-button" data-courses-id="<?=$coursesID?>" onclick="Payment(this)">
          purchase
      </button>

    jQuery:

    function Payment(button) {

      $(".body-payment").css("display", "flex");
      $("body").css("overflow", "hidden");
      
      const courseID = $(button).attr("data-courses-id");
      const data = { courseID: courseID };

      $.post("payment.php", data)
        .done(function(response) {
          console.log("Payment data sent successfully! Server response: ", response);
        })
        .fail(function(error) {
          console.error("Error sending payment data:", error);
        });
    }

    payment.php:

    <?php
if (isset($_POST['courseID'])) {
  echo 'I received the following: ' . $_POST['courseID'];
}
else echo "Error";
?>

    Console output:

    Payment data sent successfully! Server response:  I received the following: 89

    Working repl.it repo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search