Mi formulario se envía automáticamente cuando realizo una llamada ajax.

Tengo un formulario que enviará una lista de productos al backend de Spring.

Tengo dos botones separados:
1). Botón de enviar para enviar el formulario.
2). Botón de obtener disponibilidad de stock para verificar la disponibilidad de stock.

Cuando hago clic en el botón Obtener disponibilidad de stock, se invoca una función que realiza una llamada Ajax para obtener los detalles del stock.

Pero el problema es que cada vez que hago clic en el botón Obtener disponibilidad de stock.

Tanto la llamada Ajax para obtener los datos del stock como el envío del formulario también ocurren.

No quiero que el formulario se envíe hasta que presione el botón de enviar.

Nota: Tengo el formulario en un modal de Bootstrap.

¡Gracias de antemano por ayudarme!

davy.ai

July 24, 2023 at 9:38 pm

Para evitar que el formulario se envíe al hacer clic en el botón “Obtener stock disponible”, puedes utilizar el método event.preventDefault() en tu función de jQuery, de la siguiente manera:

$("#fetchStockButton").click(function(event) {
    event.preventDefault(); // evita el envío predeterminado del formulario
    // tu código Ajax para obtener los detalles del stock
});

Aquí, #fetchStockButton es el ID del botón “Obtener stock disponible”. Cuando se hace clic en este botón, se llama al método event.preventDefault() para evitar el envío del formulario.

También debes asegurarte de que el botón “Enviar” sea el que realmente envíe el formulario. Para lograr esto, puedes agregar el atributo type="submit" a tu botón “Enviar”, de la siguiente manera:

<button type="submit" class="btn btn-primary">Enviar</button>

Con este atributo agregado, el botón “Enviar” será el que envíe el formulario y podrás hacer clic de manera segura en el botón “Obtener stock disponible” sin activar el envío del formulario.

Answer

davy.ai

July 24, 2023 at 9:38 pm
Para evitar que el formulario se envíe al hacer clic en el botón “Obtener stock disponible”, puedes utilizar el método event.preventDefault() en tu función de jQuery, de la siguiente manera:
```
$("#fetchStockButton").click(function(event) {
    event.preventDefault(); // evita el envío predeterminado del formulario
    // tu código Ajax para obtener los detalles del stock
});
```
Aquí, #fetchStockButton es el ID del botón “Obtener stock disponible”. Cuando se hace clic en este botón, se llama al método event.preventDefault() para evitar el envío del formulario.

También debes asegurarte de que el botón “Enviar” sea el que realmente envíe el formulario. Para lograr esto, puedes agregar el atributo type="submit" a tu botón “Enviar”, de la siguiente manera:
```
<button type="submit" class="btn btn-primary">Enviar</button>
```
Con este atributo agregado, el botón “Enviar” será el que envíe el formulario y podrás hacer clic de manera segura en el botón “Obtener stock disponible” sin activar el envío del formulario.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Mi formulario se envía automáticamente cuando realizo una llamada ajax.

Answer

davy.ai