0

I'm trying to display params of a fetch. From fetch I call a php script passing parameters I want to display.

The JavaScript code:

const fichero = "/proves/php/accion_formulario.php";

let tp_curso = document.getElementById("actualizar_nombre").value;
let vr_curso = document.getElementById("version_lenguaje").value;
let pr_curso = document.getElementById("programa_curso").value;
let fp_curso = document.getElementById("ficheros_curso").value;
let vp_curso = document.getElementById("videos_curso").value;

let respuesta = fetch(fichero, {
    method: "POST",
     headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        },
    body: 'nom=tp_curso&versio=vr_curso&programa=pr_curso&fitxers=fp_curso& 
    &fitxers=fp_curso&videos=vp_curso&ncurs=curso_actualizar', 
    headers: {"Content-type": "application/text; charset=UTF-8"}
})
    .then(respuesta => respuesta.text())
    .then(respuesta => {
    alert(respuesta); 
})
.catch(error => alert("Se ha producido un error: " + error));

The php code:

    $this -> n_curso = $_POST["nom"];
    $this -> titulo_curso = $_POST["versio"];
    $this -> version_curso = $_POST["programa"];
    $this -> programa_curso = $_POST["fitxers"];
    $this -> dir_ficheros_curso = $_POST["videos"];
    $this -> dir_videos_curso = $_POST["ncurs"];

    $this -> params[0] =  $this -> n_curso;
    $this -> params[1] = $this -> titulo_curso;
    $this -> params[2] = $this -> version_curso;
    $this -> params[3] = $this -> programa_curso;
    $this -> params[4] = $this -> dir_ficheros_curso;
    $this -> params[5] = $this -> dir_videos_curso; 
    
    print_r($this -> params);

What I dipslay is an empty array:

   Array
   (
    [0] => 
    [1] => 
    [2] => 
    [3] => 
    [4] => 
    [5] => 
   )

I read this post but I couldn't fix the issue.

What I'm doing wrong?

Thanks

axmug
  • 476
  • 2
  • 10
  • 26
  • 1
    My PHP is 8 years rusty, but isn't `$_POST["nom"]` supposed to read `{ "nom" : tp_curso }`? You are sending a string as body (`'nom=tp_curso&versio=vr_curso&programa=pr_curso'`) instead of an object(`{ nom : tp_curso, versio : vr_curso, programa : pr_curso }`) – Jeremy Thille Nov 13 '21 at 21:24
  • No. If I send an object the result is the same. No parameters displayed. – axmug Nov 16 '21 at 11:55

1 Answers1

4

Your parameters object literal contains the key headers twice, which takes the latter value (which unfortunately no longer is a syntax error). You're sending application/text; charset=UTF-8 instead of application/x-www-form-urlencoded for the Content-Type, so PHP won't parse the parameters as you expect.

To fix it, use

fetch(fichero, {
    method: "POST",
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: '…',
})
.then(respuesta => respuesta.text())
.then(respuesta => {
    alert(respuesta); 
})
.catch(error => alert("Se ha producido un error: " + error));

Also notice that your body is currently a hardcoded string, not taking into account the variables. To do this you'd need to

  • use a template string (or string concatenation) with escaping the values yourself:

    body: `nom=${encodeURIComponent(tp_curso)}&versio=${encodeURIComponent(vr_curso)}&…`,
    
  • use a URLSearchParams object:

    body: new URLSearchParams({nom: tp_curso, versio: vr_curso, …}),
    
  • use a FormData object. This is the easiest if you have a <form> for all the input elements and each <input> has the proper name attribute (just like you'd use when natively submitting the form, without any XHR/fetch):

    body: new FormData(document.getElementById('accion_form')),
    
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • Thanks for the answer. The second option that is using a URLSearchParams has worked. Neither string concatenation nor FormData has worked. – axmug Nov 15 '21 at 15:51