Sending null values to php from post js-CodePudding

I'm trying to send values obtained from datable to a php file but sends null and return empty values from php

This is what'ive tried

    document.addEventListener("DOMContentLoaded", function(event) {
  
    const allButtons = document.querySelectorAll('#tablaUnidades td button');

      allButtons.forEach(function(elem) {
       elem.addEventListener("click", (e)=> {
        e.preventDefault();
    
      var allCells = elem.parentNode.parentNode.cells;

      codigo = allCells[0].textContent;
      deslar = allCells[1].textContent;
      descor = allCells[2].textContent;
      opcion = allCells[3].textContent; 

      console.log(codigo,deslar,descor,opcion);

        fetch('bd/crud_unidades.php',{
        method: "POST",
        data: {codigo, deslar, descor, opcion}
 
    })
        .then(res=>res.text())
        .then(data=>{
            console.log(data);
    }) 
    });
    });
    });

                                <table  id="tablaUnidades" width="100%" cellspacing="0" method="post">
                                    <thead>
                                        <tr>
                                            <th>CODIGO</th>
                                            <th>DESCRIPCIÓN LARGA</th>
                                            <th>DESCRIPCIÓN CORTA</th>
                                            <th>ACCIÓN</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td id="codigo"> value 1</td>
                                            <td id="deslar"> value 2</td>
                                            <td id="descor">value 3</td>
                                            <td><button class='btn btn-primary btnVER' id="VER" name="VER"> Click Me</button></a></td>
                                        </tr>
                                        <?php
                                        }
                                        ?>
                                    </tbody>
                                </table>

crud_unidades.php :

<?php

$codigo = var_dump($_POST['codigo']);
$deslar = var_dump($_POST['deslar']);
$descor = var_dump($_POST['descor']);
$opcion = var_dump($_POST['opcion']);

echo var_dump($codigo);

?>

Now I have no idea on how to assign that javascript variable to the php one to use the phpvariable to look up stuff in my database please help

CodePudding user response：

The source of your woes is the way you're forming your POST object. You're not assigning key/value pairs, you're just creating an object with values - which is not a valid object and I'll best javascript is throwing an error on that.

Your fetch should look more like this:

 fetch('bd/crud_unidades.php',{
    method: "POST",
    data: {codigo: codigo, deslar: deslar, descor: descor, opcion: opcion}
   })

Along those lines, if you update your table cell html in the future, this line might stop working:

  var allCells = elem.parentNode.parentNode.cells;

Rather, try using closest(selector) which will work it's way up the DOM tree until it finds the selector match, like:

  var allCells = elem.closest('tr').querySelectorAll('td');

CodePudding user response：

    var formData = new FormData;
var arr = {'codigo': codigo, 'deslar': deslar, 'descor': descor, 'opcion': opcion};
 Object.entries(arr).forEach(([key, value]) => {
  formData.append(key,value);
  });
    

fetch('bd/crud_unidades.php',{
method: "POST",
cors: "CROS",
body: formData,
 })

This was the correct way