Home / Questions / 502214
Accepted
Daniel Rivas
Asked: 2022-05-09 16:31:20 +0800 CST 2022-05-09 16:31:20 +0800 CST

Send parameters with Fetch PHP

  • 772

I have to send the NIT parameter and the PAYMENT METHOD parameter, the problem is that the NIT is being sent correctly to the PHP file by the POST method, but the payment method parameter is not being sent and the following error is thrown:

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

My code is the following:

HTML INVOICE PAYMENT METHOD:

<form id="metodoPagoFactura" class="row g-3" method="POST">

                                                <div class="col-lg-12 py-2">
                                                    <label for="inputEmail4" class="form-label">Método de Pago <span class="red" style="color: red;">*</span></label>
                                                    <select name="metodoPago" id="metodoPago" class="form-control" required>
                                                        <option value="">Selecciona...</option>

                                                        <?php
                                                        include("../controlador/csBDDCon.php");

                                                        $query = "SELECT MetodoPago_Tipo, MetodoPago_Recargo FROM metodo_pago_ard ORDER BY MetodoPago_Tipo ASC";
                                                        $ejecutar = mysqli_query($conexion, $query) or die(mysqli_error($conexion));
                                                        ?>

                                                        <?php foreach ($ejecutar as $opciones) : ?>
                                                            <option value="<?php echo $opciones['MetodoPago_Tipo'] ?>"><?php echo $opciones['MetodoPago_Tipo'] ?></option>
                                                        <?php endforeach; clearstatcache();?>
                                                    </select>
                                                </div>
                                            </form>
                                            <div class="col-md-12 py-3">
                                                    <button class="btn btn-dark" onclick="finalizarVenta()">Finalizar Venta</button>
                                                </div>

HTML TIN:

<form id="nit" class="row g-3" method="POST">

                                            <div class="col-md-12 py-2">
                                                <label for="inputNEmpleado" class="form-label">NIT del Cliente
                                                    <span class="red" style="color: red;">*</span>
                                                </label>

                                                <input type="text" id="ingresoNIT" name="ingresoNIT" class="form-control" maxlength="20" placeholder="Ej: CF o 105223510" onkeyup="validarNIT()" required>

                                            </div>

                                            <div class="col-md-6 py-2" id="nombreNIT" name="nombreNIT">
                                                <!-- Nombre Completo  -->
                                            </div>

                                            <div class="col-md-6 py-2" id="apellidoNIT" name="apellidoNIT">
                                                <!-- Nombre Completo  -->
                                            </div>


                                            <div class="col-md-12 py-2" id="direccionNIT" name="direccionNIT">
                                                <!-- Direccion del Cliente  -->
                                            </div>

                                        </form>

JAVA SCRIPT

                var nitFinal = document.getElementById('nit');
                var metodoPagoFact = document.getElementById('metodoPagoFactura');

                var datos = new FormData(nitFinal);
                var datos2 = new FormData(metodoPagoFact);
                

                // Obtienes las entradas del formulario X para meterlos al fomulario Y.
                for (let [key, value] of datos2.entries()) {
                   datos.append(key, value);
                }

                fetch('../controlador/nuevaFactura/facturaFinal/csInsertarFacturaFinal.php',{
                    method: 'POST',
                    body: datos
                })
                    .then( res => res.json())
                    .then( data => {
                        console.log(data)
                    })

What the code does is bring the form data with the ID #metodoPagoFacturaand set it in the data2 variable with a constructor of type FormData, and this attaches or concatenates it to the data variable, which is the one with the person's NIT, The line that shows the console that fails is this:

var datos2 = new FormData(metodoPagoFact);

Any solution to my problem? , Cheers!

php

2 Answers

  1. The error

    Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

    It usually happens when you try to pass to the constructor of FormData() an element that is not a form .

    If we compare your two form references:

    var nitFinal = document.getElementById('nit');
var metodoPagoFact = document.getElementById('metodoPagoFactura');

    with the form ids you share:

    <form id="metodoPagoFactura" class="row g-3" method="POST">

    Y

    <form id="productosFactura" class="row g-3" method="POST">

    We see that there is no form identified bynit , therefore, this cannot be done:

    new FormData(nitFinal); //Error! nitFinal no es un formulario

    The confusion

    If I understand correctly, what you want is to put nitthe value of the payment method parameter in the property . ? It's very confusing really. Do you want to combine both forms? Or do you want to take the value of selectthe form metodoPagoFacturaand put it in another property of the FormData that you want to send in the fetch?

    Possible solutions

    Since it's all very confusing, I'll show you how you can do one or the other, depending on the case.

    We're reproducing two simple forms, since we don't have a PHP context here to create your actual forms.

    Solution to

    In the case of wanting to combine both forms, assuming that you are interested in having all the elements of the second form in the final FormData , you can do it like this:

    var frmProductos = document.getElementById("productosFactura");
var frmMetodos = document.getElementById("metodoPagoFactura");

dataProductos = new FormData(frmProductos);
dataMetodos = new FormData(frmMetodos);

/*Agregamos TODOS los elementos de un FD en otro*/

for (let [key, value] of dataMetodos.entries()) {
  dataProductos.append(key, value);
}

/*Verificamos el FD final*/
for (let [key, value] of dataProductos.entries()) {
  console.log(`${key} : ${value}`);
}
    <form id="metodoPagoFactura" class="row g-3" method="POST">

  <div class="col-lg-12 py-2">
    <label for="inputEmail4" class="form-label">Método de Pago <span class="red" style="color: red;">*</span></label>
    <select name="metodoPago" id="metodoPago" class="form-control" required>
      <option value="">Selecciona...</option>
      <option value="1">Uno</option>
      <option value="2 Por defecto para prueba" selected>2</option>
    </select>
    <input type="text" name="test" value="Agregado ad libitum" />
  </div>
</form>


<form id="productosFactura" class="row g-3" method="POST">

  <div class="col-md-12 py-2">
    <input type="text" class="form-control" placeholder="Buscar producto" id="producto" name="producto" onkeyup="cantidadStock()" onchange="cantidadStock()" value="Valor por defecto para prueba" required>
    <p id="nombre"></p>
  </div>

  <div class="col-md-4 py-2" id="cantidadAVender" name="cantidadAVender" onkeyup="validarVentaExistencia()" required>

  </div>


  <div class="col-md-4 py-2" id="cantidad" name="cantidad">
    <!-- CANTIDAD DE PRODUCTO -->
  </div>


  <div class="col-md-4 py-2" id="precioventa" name="precioventa">
    <!-- PRECIO DE VENTA DEL PRODUCTO -->
  </div>


  <div class="col-md-12 py-3">
    <button class="btn btn-success" id="btnadd" name="btnadd">Agregar</button>
    <button class="btn btn-danger" id="btnlimpiar" name="btnlimpiar">Limpiar Productos</button>
  </div>

</form>

    Solution B

    If what you are interested in is simply putting the value of selectin the FormData that you will send with fetch, then the simplest thing is to take that element by its ID and put it in the FormData. This way you avoid creating a new object, traversing it, etc. Using a FormData to reach a single identified element of it would be something like taking a plane to go buy bread...

    var frmProductos = document.getElementById("productosFactura");
var optMetodo = document.getElementById("metodoPago");

dataProductos = new FormData(frmProductos);

/*Agregamos EL elemento que interesa*/
dataProductos.append(optMetodo.id,optMetodo.options[optMetodo.selectedIndex].value);


/*Verificamos el FD final*/
for (let [key, value] of dataProductos.entries()) {
  console.log(`${key} : ${value}`);
}
    <form id="metodoPagoFactura" class="row g-3" method="POST">

  <div class="col-lg-12 py-2">
    <label for="inputEmail4" class="form-label">Método de Pago <span class="red" style="color: red;">*</span></label>
    <select name="metodoPago" id="metodoPago" class="form-control" required>
      <option value="">Selecciona...</option>
      <option value="1">Uno</option>
      <option value="2 Por defecto para prueba" selected>2</option>
    </select>
    <input type="text" name="test" value="Agregado ad libitum" />
  </div>
</form>


<form id="productosFactura" class="row g-3" method="POST">

  <div class="col-md-12 py-2">
    <input type="text" class="form-control" placeholder="Buscar producto" id="producto" name="producto" onkeyup="cantidadStock()" onchange="cantidadStock()" value="Valor por defecto para prueba" required>
    <p id="nombre"></p>
  </div>

  <div class="col-md-4 py-2" id="cantidadAVender" name="cantidadAVender" onkeyup="validarVentaExistencia()" required>

  </div>


  <div class="col-md-4 py-2" id="cantidad" name="cantidad">
    <!-- CANTIDAD DE PRODUCTO -->
  </div>


  <div class="col-md-4 py-2" id="precioventa" name="precioventa">
    <!-- PRECIO DE VENTA DEL PRODUCTO -->
  </div>


  <div class="col-md-12 py-3">
    <button class="btn btn-success" id="btnadd" name="btnadd">Agregar</button>
    <button class="btn btn-danger" id="btnlimpiar" name="btnlimpiar">Limpiar Productos</button>
  </div>

</form>

    • 1
  2. Best Answer

    In the end, I found a solution that became more feasible for me.

    I take the value of the payment method with the ".value" property, then I match the variable datos2 = metodoPagoFact for better control, then I concatenate the value of metodoPagoFact, and first, the name 'mpagar' which is the ID of the select where I am pulling the data, to send them to the .php file in which this data is:

    $sNit = $_POST['ingresoNIT'];
$sMetodoPago = $_POST['mpagar'];

    So the code would be:

                    var nitFinal = document.getElementById('nit');
                var metodoPagoFact = document.getElementById('mpagar').value;

                var datos = new FormData(nitFinal);
                var datos2 = metodoPagoFact;

                // Obtienes las entradas del formulario X para meterlos al fomulario Y.
                datos.append('mpagar',metodoPagoFact);

                fetch('../controlador/nuevaFactura/facturaFinal/csInsertarFacturaFinal.php',{
                    method: 'POST',
                    body: datos
                })
                    .then( res => res.json())
                    .then( data => {
                        console.log(data)
                    })
    • 0