Ajax doesn't send parameter to php file

Question

I got stuck in some simple javascript code. Basically I want to send data from my javascript file to a php file using AJAX. When I click the button I get always the message: nothing was sent. There might be a stupid mistake, I must say that is my first project in javascript. Although I successfully get data from index.php to javascript code in the first ajax request.

This is my javascript code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
  var ajax = new XMLHttpRequest();
  ajax.open("GET", "index.php", true);
  ajax.send();
  ajax.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var data = JSON.parse(this.responseText);
      console.log(data);

      //Create the table element
      var table = document.createElement("table");
      table.setAttribute("border", 1);

    for (var a = 0; a < data.length; a++) {
        var nr_comanda = data[a].nr_comanda;
        var nr_masa = data[a].nr_masa;
        var descriere = data[a].descriere;
        var observatii = data[a].observatii;
        var total_plata = data[a].total_plata;
        var btnId = nr_comanda;
        var button = document.createElement("button");
        button.id = btnId;
        button.onclick = orderIsReady;
        //Create the row element
        var row = document.createElement("tr");
        //Create the 2 columns
        var col1 = document.createElement("td");
        var col2 = document.createElement("td");
        var col3 = document.createElement("td");
        var col4 = document.createElement("td");
        var col5 = document.createElement("td");
        var col6 = document.createElement("td");

        //Add the checkbox to the column
        col6.appendChild(button);

        //Set the text of second column
        col1.textContent = nr_comanda;
        col2.textContent = nr_masa;
        col3.textContent = descriere;
        col4.textContent = observatii;
        col5.textContent = total_plata;

        //Add columns to the row
        row.appendChild(col1);
        row.appendChild(col2);
        row.appendChild(col3);
        row.appendChild(col4);
        row.appendChild(col5);
        row.appendChild(col6);

        //Add the row to the table
        table.appendChild(row);
      }
      document.body.appendChild(table);
    }
  };

  function orderIsReady(btn_id) {
    var xhr = new XMLHttpRequest();

    xhr.onload = function() {
      if (this.response == "OK") {
        alert("OK!");
      } else {
        alert(this.response);
      }
    };
    xhr.open("POST", "Delete.php");
    xhr.send("nr_comanda=44");
  }
</script>

This is my php file:

<?php

if (isset($_POST["nr_comanda"]))
{
    $nr_comanda=$_POST["nr_comanda"];
    echo $nr_comanda;
} 
else 
{
  echo "nothing was sent";
}

?>

Answer 1

I see you use for loop to create and append the action onclick, how about separate it?

let buttons = []
for (let i = 0; i < 10; i++) {
  // create your tr td and button here, but create some temporary button storage
  const button = document.createElement("button")
  buttons.push(buttonElement)
}

// append the listener after all button rendered
buttons.forEach(function(element) {
  element.onclick = doSomethingFunction
})


// send the xhr, I hope it help
function doSomethingFunction() {
    let xhr = new XMLHttpRequest();
    let formData = new FormData("nr_comanda=44");

    xhr.onload = function() {
      if (this.response == "OK") {
        alert("OK!");
      } else {
        alert(this.response);
      }
    };

    xhr.open("POST", "Delete.php");
    xhr.send(formData);
}