Home / Questions / 501910
Accepted
Daniel Rivas
Asked: 2022-05-08 09:34:45 +0800 CST 2022-05-08 09:34:45 +0800 CST

Send content of two forms with JavaScript

  • 772

I have a PHP file where POST type data is received to be displayed on the console, these are NIT and payment method.

PHP:

<?php
$sNit = $_POST["ingresoNIT"];
$sMetodoPago = $_POST["metodoPago"];


echo json_encode('Correcto: <br>NIT:'.$sNit);
echo json_encode('Correcto: <br>METODOPAGO:'.$sMetodoPago);
?>

The NIT and the payment method are in two different forms, and I need to send the content of the two forms to the PHP file to do the validations, my code is as follows:

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

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

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

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

I need to send both form data to the same PHP, but only the last one is working for me, if I remove the first fetch, the data2 body that has the payment method is saved, and if I remove the second, the NIT is saved or sent, but I need that both are sent, thanks for the support.

javascript

1 Answers

  1. Best Answer

    You could use FormData.append()and FormData.entries()together to get an expected result.

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

    In other words, you are getting both forms and mixing the values ​​into one in order to send all the data together as if it were a single form.

    Note: just be careful not to have fields under the same name in both forms as this could lead to unwanted behavior.

    Official Documentation (MDN):

    • 5