0

Tengo que enviar el parámetro NIT y el parámetro MÉTODO DE PAGO, el problema es que el NIT se está enviando de manera correcta al archivo PHP por el método POST, pero el parámetro método de pago no se está enviando y lanza el siguiente error:

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

Mi código es el siguiente:

HTML METODO PAGO FACTURA:

<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 NIT:

<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>

JAVASCRIPT

                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)
                    })

Lo que hace el código es traer los datos del formulario con el ID #metodoPagoFactura y setearlos en la variable datos2 con un constructor de tipo FormData, y este lo adjunta o lo concatena a la variable datos, que es el que tiene el NIT de la persona, la linea que muestra la consola que falla es esta:

var datos2 = new FormData(metodoPagoFact);

¿Alguna solución a mi problema? , saludos!

5
  • Falta agregar el código html, para poder ayudarte con el error Commented el 9 dic. 2021 a las 0:44
  • Listo, ya lo agregué, saludos! Commented el 9 dic. 2021 a las 2:36
  • Acabo de ejecutar el código y no veo que falle al parsear el form metodoPagoFactura, no será en el primer form, new FormData(nitFinal);, ya que este no viene en el código. Commented el 9 dic. 2021 a las 4:49
  • jsbin.com/muyatetajo/edit?js,console,output Commented el 9 dic. 2021 a las 4:49
  • Disculpa Eduardo, ya agregué el FORM Nit, no me di cuenta que agregué el que no era, saludos. Commented el 9 dic. 2021 a las 16:59

2 respuestas 2

1

El error

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

Suele ocurrir cuando intentas pasar al constructor de FormData() un elemento que no es un formulario.

Si comparamos tus dos referencias a formularios:

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

con los ids de formularios que compartes:

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

y

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

Vemos que no hay ningún formulario identificado por nit, por lo tanto, esto no lo puedes hacer:

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

La confusión

Si he entendido bien, lo que te interesa es meter en la propiedad nit el valor del parámetro método de pago. ¿? Es muy confuso realmente. ¿Quieres combinar ambos formularios? ¿O quieres tomar el valor del select del formulario metodoPagoFactura y meterlo en otra propiedad del FormData que quieres enviar en el fetch?

Posibles soluciones

Dado que es todo muy confuso, te mostraré cómo puedes hacer una u otra cosa, según el caso.

Reproducimos dos formularios sencillos, dado que no contamos aquí con un contexto PHP para crear tus formularios reales.

Solución A

En el caso de querer combinar ambos formularios, suponiendo que te interesa tener todos los elementos del segundo formulario en el FormData final, puedes hacerlo así:

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>

Solución B

Si lo que interesa simplemente es meter el valor del select en el FormData que enviarás con fetch, entonces lo más simple es tomar ese elemento por su ID y meterlo en el FormData. Así evitas crear un nuevo objeto, recorrerlo, etc. Usar un FormData para alcanzar un único elemento de él identificado, sería algo así como tomar un avión para ir a comprar el pan...

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>

3
  • Gracias A. Cedano, ya corregí la pregunta, no me di cuenta que no agregué el Form correcto, podrías ayudarme? , saludos, y disculpa las molestias. Commented el 9 dic. 2021 a las 17:00
  • @DanielRivas la solución que explicas en tu respuestas es lo propuesto en el apartado Solución B. Sólo que en vez de hacerlo basado en su select option lo haces mediante value, al no ser un select el elemento cuyo valor quieres agregar al FormData.
    – A. Cedano
    Commented el 9 dic. 2021 a las 21:22
  • No me di cuenta de eso Cedano, de igual manera te llevas un +1 , gracias por el apoyo! Commented el 9 dic. 2021 a las 22:40
0

Al final, encontré una solución que se me hizo más factible.

Tomo el valor de método de pago con la propiedad ".value" , luego igualo la variable datos2 = metodoPagoFact para mejor control, luego le concateno el valor de metodoPagoFact, y en primer lugar, el nombre 'mpagar' que es el ID de el select en dónde estoy jalando los datos, para enviarlos al archivo .php en el que se tienen estos datos:

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

Por lo que el código quedaría:

                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)
                    })

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.