0

Hola buen día comunidad Stackoverflow, estoy intentando hacer un formulario multiple donde el mismo formulario lo puedan cargar varias veces para enviar varia información al mismo tiempo y sin tener que llenar el formulario una vez enviar y volver a llenar y es mejor poner varios formulario y llenar lo necesario y enviar los registros a la bd pero el detalle que al momento de enviar mis datos a la base de datos solo me toma la información del primer formulario de los otros ya no... la pregunta es como puedo hacer para que se inserten todos los datos del formulario sin importar cuantos sean ya sea 1 o 100 ??

codigo html

<section class="page-agregar">
<div class="title">
    <h1>Agregar Material</h1>
</div>
<div class="agregar-form">
    <button class="agregar" id="agregar"><span>+</span> Agregar Campos Para Registro de Material</button>
</div>
<div id="nuevo-form"></div>
    <form action="#" class="form-agregar" id="form-agregar">
        <br>
    </form>
<div class="btnEnviarInfo">
    <input type="hidden" id="accion" value="crear">
    <input type="submit" value="Añadir" class="enviarInfo" id="enviarInfo" form="form-agregar">
</div>

codigo js y ajax

const agregar = document.getElementById('agregar');
const contenedor = document.getElementById('form-agregar');

agregar.addEventListener('click',function(){


       let htmlTemplate = `
                    <div class="form-group">
                        <label for="">Custom PN: </label><br>
                        <input type="text" name="custom" placeholder="Custom PN" id="custom">
                    </div>

                    <div class="form-group">
                        <label for="">Qty: </label><br>
                        <input type="text" name="qty" placeholder="Cantidad pzs" id="qty">
                    </div>

                    <div class="form-group">
                        <label for="">PO: </label><br>
                        <input type="text" name="po" placeholder="PO" id="po">
                    </div>

                    <div class="form-group">
                        <label for="">Pallets: </label><br>
                        <input type="text" name="pallets" placeholder="Numero de Pallets" id="pallets">
                    </div>

                    <div class="form-group">
                        <label for="">SO: </label><br>
                        <input type="text" name="so" placeholder="Sail Order" id="so">
                    </div>

                    <div class="form-group">
                        <label for="">DN: </label><br>
                        <input type="text" name="dn" placeholder="DN" id="dn">
                    </div>

                    <div class="form-group">
                        <label for="">#Factura: </label><br>
                        <input type="text" name="factura" placeholder="Numero de Factura" id="factura">
                    </div>

        `;
        contenedor.innerHTML += htmlTemplate;

});


    const formularioContactos = document.querySelector('#form-agregar');

    eventListeners();

    function eventListeners(){

        //cuando el formulario contacto se ejecuta
        formularioContactos.addEventListener('submit', leerformulario);

    }

    function leerformulario(e) {
        e.preventDefault();

        const custom = document.querySelector('#custom').value,
            qty = document.querySelector('#qty').value,
            po = document.querySelector('#po').value,
            pallets = document.querySelector('#pallets').value,
            so = document.querySelector('#so').value,
            dn = document.querySelector('#dn').value,
            factura = document.querySelector('#factura').value,
            accion = document.querySelector('#accion').value;


        if (custom === '' || qty === '' || po === '' || pallets === '' || so === '' || dn === '' || factura === '') {
            //dos parametros texto y clases
            mostrarNotificacion('Todos los campos son obligatorios', 'error');
        } else {
            //pasa la validacion llamada ajax
            const infoContacto = new FormData();
            infoContacto.append('custom', custom);
            infoContacto.append('qty', qty);
            infoContacto.append('po', po);
            infoContacto.append('pallets', pallets);
            infoContacto.append('so', so);
            infoContacto.append('dn', dn);
            infoContacto.append('factura', factura);
            infoContacto.append('accion', accion);

            if (accion === 'crear') {
                //crear nuevo elemento
                insertarBD(infoContacto);

            } else {
                //editar el contacto

            }
        }
    }

    //function para insertar datos en la bd por ajax
    function insertarBD(data){
        const xhr = new XMLHttpRequest();

        //abrir la conexion 
        xhr.open('POST', 'include/models/model-material.php', true);

        // pasar los datos
        xhr.onload = function(){
            if(this.status === 200){
                const respuesta = JSON.parse(xhr.responseText)
                console.log(respuesta);

            }
        }

        //enviar los datos
        xhr.send(data);
    }

codigo php

<?php

if($_POST['accion'] == 'crear'){
    //creara un nuevo registro en la base de datos

    require_once('../function/bd.php');

    $custom = filter_var($_POST['custom'], FILTER_SANITIZE_STRING);
    $qty = filter_var($_POST['qty'], FILTER_SANITIZE_NUMBER_INT);
    $po = filter_var($_POST['po'], FILTER_SANITIZE_STRING);
    $pallets = filter_var($_POST['pallets'], FILTER_SANITIZE_STRING);
    $so = filter_var($_POST['so'], FILTER_SANITIZE_STRING);
    $dn = filter_var($_POST['dn'], FILTER_SANITIZE_NUMBER_INT);
    $factura = filter_var($_POST['factura'], FILTER_SANITIZE_NUMBER_INT);

    try{
        $stmt = $conn->prepare( "INSERT INTO material_jabil (custom, qty, po, pallets, so, dn, factura) VALUES (?, ?, ?, ?, ?, ?, ?)");
        //en el bind param tienen que ir entre comillas si son string o enteros y solo se pone la inicial
        $stmt->bind_param("sisssii", $custom, $qty, $po, $pallets, $so, $dn, $factura);
        $stmt->execute();

    }catch(Exception $e){
        $respuuesta = array(
            'error' => $e->getMessage()
        );
    }

    echo json_encode($respuuesta);
}


?>
5
  • de que etiqueta estas obteniendo esto const agregar = document.getElementById('agregar');? Commented el 23 may. 2019 a las 20:34
  • <div class="agregar-form"> <button class="agregar" id="agregar"><span>+</span> Agregar Campos Para Registro de Material</button> </div>
    – francisco
    Commented el 23 may. 2019 a las 20:40
  • Tal vez sería que estás duplicando los id de todos tus inputs, por eso es que te toma sólo los del primer form que construyes, tendrías que diferenciarlos. Commented el 23 may. 2019 a las 21:09
  • pero si al momento de dar click en agregar otro campo se agrega otro formulario como puedo hacer para que cambien los id de ese formulario y de los siguientes para que se puedan agregar la información a la base de datos
    – francisco
    Commented el 23 may. 2019 a las 21:34
  • Con un contador. Commented el 23 may. 2019 a las 21:36

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.