How can I obtain the values of a button that is repeated multiple times? I have a table that opens a modal to edit a row (attached image), I would like to obtain the values of the delete button to be able to use them in ajax to later delete them from the base of data, the issue I have is that I would like those values to be stored in a single variable to pass them by parameters by ajax and use them later in a controller and in a model. Please help.
The button has its unique id.
Image where I want to get the values of the button and put them in a single variable
This is my code where I print the data I receive from the ajax in the modal and then draw the mini-table where the meters and the final price are
1.
data.post[1].forEach(item => {
// Crea contenido HTML de la fila
// Agrega un campo oculto para saber qué es lo que se está modificando
let html = `<tr>
<td>
<input type="hidden" name="editarIdPloteo[]" value="${item.ID_OTPloteo}">
<input type="text" name="editarMetrosTotalPloteo[]" class="editarMetrosTotalPloteo form-control"
value="${item.Precio_OTPloteo}">
</td>
<td>
<input type="text" class="form-control editarImporteMetrosPloteo" name="editarImporteMetrosPloteo[]"
value="${(item.Importe_OTPloteo)}" readonly>
</td>
<td>
<a href="#" id="eliminarMetros" value="${(item.ID_DetalleOTPloteo)}" class="btn btn-danger btn-icon"
type="button"><i class="icon-trash"></i></a>
</td>
</tr>`;
// Agrega fila a la tabla
$('.tablaEditarAgregarPloteo').append(html);
});
/* AGREGAR COLUMNAS A LA MINI TABLA EDITAR OT PLOTEO */ $('#editarAgregarPloteo').on('click', function () {
/* OBTENCION DEL VALOR DEL INPUT */
let datos = $('#editarMetrosPloteo').val()
if (datos != '') {
/* PROCESO PARA AUMENTAR LAS FILAS EN LA TABLA PARA AGREGAR METROS */
tabla = `<tr>`;
tabla += `<td><input type="text" name="editarMetrosTotalPloteo[]" class="editarMetrosTotalPloteo
form-control" value="${datos}"></td>`;
tabla += `<td><input type="text" class="form-control editarImporteMetrosPloteo" name="editarImporteMetrosPloteo[]"
value="${(datos * 1.25).toFixed(2)}" readonly></td>`;
tabla += `<td><a href="#" id="eliminarMetros" value="" class="btn btn-danger btn-icon" type="button"><i
class="icon-trash"></i></a></td>`;
tabla += `</tr>`;
/* DIBUJAR LA TABLA EN LA TABLA RESPECTIVA EN EL HTML */
$('.tablaEditarAgregarPloteo').append(tabla);
editarCalculosMetrosPloteo()
$('#editarAgregarPloteo').val(null);
/* FUNCION PARA HACER LOS CALCULOS */
}
/* LIMPIEZA DEL INPUT DESPUES DE AGREGAR LOS METROS */
$('input[name=editarMetrosPloteo]').val('');
/* ELIMINACION INDIVIDUAL DE LOS METROS CUANDO LA TABLA YA ESTA CREADA */
$(document).on('keyup', '.tablaEditarAgregarPloteo input.editarMetrosTotalPloteo', function () {
/* OBTENER EL VALOR DEL INPUT */
let metros = $(this).val();
// alert(metros)
/* CALCULOS */
let importe = (metros * 1.25).toFixed(2)
/* IMPRESION EN EL INPUT READONLY DE LA COLUMNA DE IMPORTES */
$(this).closest('tr').find('td:eq(1)').children('input').val(importe)
})
}); $(document).on('click', '#eliminarMetros', function () {
$(this).closest('tr').remove()
editarCalculosMetrosPloteo() })
To get all the buttons in a list you can put a class on those buttons and retrieve them like this:
You can do the same with jquery just by modifying the first line, the rest should be the same.
Update:
Within the function that opens the modal, you define the array that stores the values to delete, in addition to including
$(document).on('click', '.eliminarMetros', function () { ... }
.As a result, every time a modal is opened an array is defined and a function is created to "listen" for button clicks with class "removeMeters".
Solution:
end of update
In the answer to your other question I missed that IDs were being repeated for the link
id="eliminarMetros"
and they must be unique. The modifications:Update 2
Check the operation of the first example, there are no duplicates, but in this one, why? Simply because each time the function is executed
cargar()
, a new event is assigned to the buttons. I hope now it is clear.