FETCH JavaScript PHP process the data on the server sent with fetch

Question

I have this doubt of how to process the data brought from my form, I am using javascript with a fetch to receive the data of the form, but I have the doubt of how I should process them in php, nor is the click event of the send button working, the problem is that the server seems not to be receiving the array sent from javascript with the data, agradesco if you give me any source to delve into the topic of fetch api, I am new to javascript and php

my Javascript

registrar.addEventListener("click", () => {
    fetch("../add.php", {
        method: "post",
        body: new FormData(frm) //frm es el id del formulario
    }).then(response => response.text()).then
        (response => {
            // console.log(response);
            // si la respuesta sel servidor es "ok" arroja una alerta personalizada
            if (response == "ok") {
                Swal.fire({
                    icon: 'success',
                    title: 'Registrado',
                    showConfirmButton: false,
                    timer: 1500
                })
                frm.reset();
            }
        }
        )
})

  <form action="" method="post" id="frm">
                      <div class="form-group">              
                       <br>      

                    <div class="form-group">
                        <div class="form-group">
                          <input type="text" name="name_usu" id="name_usu" class="form-control form-control-md" placeholder="Nombre completo" required >
                        </div>
                        <input type="text" name="phone_usu" id="phone_usu" class="form-control form-control-md" placeholder="Numero de teléfono" required>
                      </div>

                        <input type="email" name="nom_usu" id="nom_usu" class="form-control form-control-md" placeholder="Email" required></div>
                        <input type="text" name='torreApto' id="Torre_apto" class="form-control form-control-md" placeholder="Torre y apartamento" required>
                      <label for="FormControlSelect1" class="text-light">Escoja tipo de residente</label>
                      <select class="form-control" name="sel_apto" id="sel_apto" required>
                        <option selected>Propietario</option>
                        <option selected>Arrendado</option>
                        <option selected>Otro</option>
                      </select>
                          
                          <div class="form-group">
                            <label for="Textarea1" class="text-light">Mensaje a enviar</label>
                            <textarea class="form-control" name="mensaje" id="Textarea1" rows="3"></textarea>
                          </div>
                          <br>  
                        <input type="button" class="btn btn-outline-light btn-block border-light text-light font-weight-bold" value="registrar" id="registrar">
                  </form>

addRegister.php

enter if (isset($_POST)) {
$nombre = $_POST['name_usu'];
$telefono = $_POST['phone_usu'];
$email = $_POST['nom_usu'];
$torreApto = $_POST['torreApto'];
$arrendado = $_POST['sel_apto'];
$mensaje = $_POST['mensaje'];
require("connect.php");

// script guardando en la base de datos 
$query = $con->prepare("INSERT INTO informacion(nombre,telefono,email,torreApto,arrendado,mensaje) VALUES (:nom, :tel, :ema, :torr, :arr, :men)");
$query->bindParam(":nom", $nombre);
$query->bindParam(":tel", $telefono);
$query->bindParam(":ema", $email);
$query->bindParam(":torr", $torreApto);
$query->bindParam(":arr", $arrendado);
$query->bindParam(":men", $mensaje);

//ejecuta el script 
$query->execute();
$con = null;
echo "ok";

}

Sheikh Haziq · Accepted Answer · 2022-03-19 08:55:48Z

1

Try to add

$_POST = file_get_contents('php://input');

at the beginning of your file.

answered Mar 19, 2022 at 8:55

Sheikh Haziq

2442 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RoToRa · Accepted Answer · 2022-03-19 09:40:46Z

1

You are not initializing the FormData correctly. To fill it with the data of a form you have to pass in a reference to the form. Currently you are passing in an undefined variable, that just happens to be the same as the ID of the form.

You need to get a reference to the form using, for example, getElementById:

new FormData(document.getElementById("frm"))

answered Mar 19, 2022 at 9:40

RoToRa

38.5k12 gold badges73 silver badges110 bronze badges

Collectives™ on Stack Overflow

FETCH JavaScript PHP process the data on the server sent with fetch

my Javascript

addRegister.php

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

my Javascript

addRegister.php

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related