Skip to main content
se añadieron 274 caracteres en el cuerpo
Origen Enlace
francisco
  • 153
  • 1
  • 3
  • 14
<div<section id="nuevoclass="page-form"><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>
</section>
<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>
</section>
<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>
Origen Enlace
francisco
  • 153
  • 1
  • 3
  • 14

como hacer multiples registros en la bd de mysql por ajax

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

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

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


?>