Esta es mi función para agregar un input en la tabla, los valores que ingrese el usuario quiero recibirlos en modo de arreglo para hacer los insert en mysql
function agregarFila() {
// añade clases y no IDs duplicados
document.getElementById("tablainvitados").insertRow(-1).innerHTML =
'<td><div class="input-group">'
+'<input type="text" class="partNo" id="partNo" name="partNo" placeholder="COD/Part No" style=" min-width:130px; max-width:40%;min-height:30px;height:100%;width:70%;" []>'
+'</div></td>'
+ '<td>'
+ '<div class="input-group">'
+ '<input type="text" class="product_name" id="product_name" name="product_name" placeholder="Nombre/Título" autofocus[]>'
+ '</div>'
+ '<div id="lst_product_name" style="cursor: pointer;" class="list-group"></div>'
+ '</td>'
+ '<td>'
+ '<div class="input-group">'
+ '<input type="text" class="measure" id="measure" name="measure" placeholder="A/E" style=" min-width:70px; max-width:40%;min-height:30px;height:70%;width:70%;" []>'
+ '</div>'
+ '</td>'
+ '<td>'
+ '<div class="input-group">'
+ '<input type="text" class="desc" id="desc" name="desc" placeholder="Descripcion"[]>'
+ '</div> '
+ '</td>'
+ '<td>'
+ '<div class="input-group">'
+ '<input type="text" class="date" name="date" id="date" data-date data-date-format="yyyy-mm-dd" placeholder="yyyy-mm-dd" style=" min-width:85px; max-width:40%;min-height:30px;height:70%;width:70%;" []>'
+ '</div>'
+ '</td>'
+ '<td>'
+ '<div class="input-group">'
+ '<textarea class="justify" id="justify" name="justify" placeholder="Justificación" style=" min-width:200px; max-width:40%;min-height:70px;height:100%;width:40%;" style=" min-width:200px; max-width:40%;min-height:70px;height:100%;width:70%;" ></textarea>'
+ '</div>'
+ '</td>'
+ ' <td>'
+ ' <div class="input-group">'
+ '<input type="text" class="quantity" id="quantity" name="quantity" placeholder="0" style=" min-width:60px; max-width:40%;min-height:30px;height:100%;width:70%;" []>'
+ ' </div> '
+ ' </td>'
;
}
Sí logro enviar los datos por AJAX pero no en forma de arreglo, supongo que la forma que se están enviando no es la indicada, porque al intentar enviarlo de forma de arreglo me genera errores.
Esta función la tengo en un archivo js
que incluyo como referencia para poder llamar la función una vez que el usuario ingrese sus datos en los inputs y, como es un arreglo de inputs, podrían ser "1 a n" renglones.
function btn_guardar_dato()
{
// Aquí intenté hacer un arreglo donde me guardara todos mis inputs,
// pero creo que esta mal por que me genera error al intentar recibirlo.
valores=new Array();
$('#tablainvitados').each(function (){
var partNo= $("#partNo").val();
var product_name = $("#product_name").val();
var measure = $("#measure").val();
var desc = $("#desc").val();
var date = $("#date").val();
var justify = $("#justify").val();
var quantity = $("#quantity").val();
});
Si solo envio la variable "ob" y lo recibo en PHP sí puedo mostrar el resultado pero en arreglo no lo he logrado.
var ob = {partNo:partNo, product_name:product_name, measure:measure, desc:desc, date:date, justify:justify, quantity:quantity};
$.ajax({
type: "POST",
url:"newtestable.php",
data: ob,
data:{valores:valores},
beforeSend: function(objeto){
},
success: function(data)
{
$("#tablainvitados").html(data);
setTimeout(function(){
$("#tablainvitados").html("");
},2000);
}
});
}
Aquí está un pequeño código donde intentaba recibirlo
Actualizacion
En esta funcion puedo recuperar todos los renglones que ingrese, y puedo recorrer el arreglo sin embargo yo quisiera ingresar esos datos a una tabla en mysql por eso intentaba pasarlo por medio de ajax.
const partNo = document.querySelectorAll(".partNo");
const product_name = document.querySelectorAll(".product_name");
const measure = document.querySelectorAll(".measure");
const desc = document.querySelectorAll(".desc");
const date = document.querySelectorAll(".date");
const justify = document.querySelectorAll(".justify");
const quantity = document.querySelectorAll(".quantity");
// los convertimos a un array bidimensional
// el primer elemento sera un array con los nombres
// el segundo elemento sera un array con los dnis
aArray = [
[...partNo].map(el => el.value),
[...product_name].map(el => el.value),
[...measure].map(el => el.value),
[...desc].map(el => el.value),
[...date].map(el => el.value),
[...justify].map(el => el.value),
[...quantity].map(el => el.value)
];
var table = document.getElementById("tablainvitados");
var rowCount = table.rows.length;
var arraylen =aArray.length;
for (var i = 0; i < rowCount - 1; i++) {
for (var j = 0; j < aArray.length; j++) {
document.write("El valor de la posición [" + i + "][" + j + "] es [" + aArray[j][i] + "]<br/>");
}
}
No se si lo que estoy haciendo sea in correcto o exista otra forma de hacerlo mas facil, recalcando que el usuario tiene que poder agregar tantas filas como desee.
// añade clases y no IDs duplicados
. Estás insertando varios campos y repitiendo IDs, que deben ser únicos