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);
}
?>
const agregar = document.getElementById('agregar');
?