Enviar formulario con mismo id con ajax
Publicado por Luciano (3 intervenciones) el 17/04/2021 18:17:54
Hola, tengo un código que muestra distintos productos. Cada uno tiene un form id="agregar_carrito"
Con un botón que al ejecutar debe mandar el serialize del formulario agregar_carrito con el id="add_carrito".
Pero claro, como es un while, todos os formularios se llaman igual.
Entonces lo que quiero es identificar de alguna manera cada formulario sin tener que cambiar los id.
Por último, el ajax una vez que agrega al pedido, ejecuta un modal de pedido satisfactorio.
Podrán ayudarme?
El formulario:
El ajax:
El Modal:
Con un botón que al ejecutar debe mandar el serialize del formulario agregar_carrito con el id="add_carrito".
Pero claro, como es un while, todos os formularios se llaman igual.
Entonces lo que quiero es identificar de alguna manera cada formulario sin tener que cambiar los id.
Por último, el ajax una vez que agrega al pedido, ejecuta un modal de pedido satisfactorio.
Podrán ayudarme?
El formulario:
1
2
3
4
5
6
7
8
9
10
11
<form action="#" id="agregar_carrito">
<div class="stepper stepper-sm stepper-secondary">
<input type="hidden" name="producto_id" value="1" />
<a href="#" class="stepper-button stepper-down">-</a>
<input type="text" class="form-control" value="0" min="0" disabled />
<a href="#" class="stepper-button stepper-up">+</a>
</div>
<button type="submit" class="btn btn-primary btn-sm" id="add_carrito" data-toggle="modal">
<ion-icon name="add-circle-outline"></ion-icon> Agregar a mi pedido
</button>
</form>
El ajax:
1
2
3
4
5
6
7
8
9
10
11
12
$("#add_carrito").click(function(e) {
var data = $("#agregar_carrito").serialize();
$.ajax({
data: data,
cache: false,
type: "post",
url: "add-pedido.php",
success: function(dataResult){
$("#DialogIconedSuccess").modal("show");
}});
});
El Modal:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="modal fade dialogbox" id="DialogIconedSuccess" data-backdrop="static" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-icon text-success">
<ion-icon name="checkmark-circle"></ion-icon>
</div>
<div class="modal-header">
<h5 class="modal-title">Agregado</h5>
</div>
<div class="modal-body">
Agregado en tu pedido
</div>
<div class="modal-footer">
<div class="btn-inline">
<a href="#" class="btn" data-dismiss="modal">CERRAR</a>
</div>
</div>
</div>
</div>
</div>
Valora esta pregunta
0
