Problem with Sweet Alert in modal

Question

Problem with Sweet Alert in modal

Navigation

#1 by (0 votes)

0

I'm doing a modal with a form in HTML. Once the fields are validated in JavaScript (it is already working correctly) I want to show a Sweet Alert alert to confirm the sending when I press the submit button. If the user does not confirm the shipment, the idea is to keep it in the modal.

The problem is that when entering all the correct data and clicking on the submit button, the alert appears but it is automatically released, without allowing me to choose between 'cancel' or 'confirm' in the alert.

JS:

function registroCompraEfectivo(){

//por acá estarían las validaciones, que tienen return = false si no se cumple

//si se confirma todo, se devuelve la siguiente alerta: 

return swal({
                  title: '¿Realmente quiere realizar el pedido?',
                  text: "Si no está seguro, por favor, cancele. De lo contrario, ¡confirme!",
                  type: 'warning',
                  showCancelButton: true,
                  confirmButtonColor: '#3085d6',
                  cancelButtonColor: '#d33',
                  confirmButtonText: 'Confirmar'
                }).then((result) => {
                  if (result.value) {
                    swal(
                      '¡Confirmado!',
                      'Su pedido ha sido registrado con éxito.',
                      'success'
                    )
                  }
                });

}

HTML:

<form method="post" onsubmit="return registroCompraEfectivo()">

<!--Por acá estaría la maquetación del modal con formulario hecho con Bootstrap-->

<input type="submit" class="btn btn-block btn-lg btn-default backColor btnPagar" value="REALIZAR PEDIDO">

</form>

javascript html sweetalert

asked by Damian Ricobelli 08.11.2018 в 18:41

source

1 answer

Different result in output format using the same function ProgressBar in WPF

score 0 · Accepted Answer

You have to remove the onsubmit method from the form and the input pass it to type="button" and add the onclick="registroCompraEfectivo();" to the input, I'll give you an example I hope it works for you.

<form id="formulario" method="post">

<!--Por acá estaría la maquetación del modal con formulario hecho con Bootstrap-->

<input type="button" onclick="registroCompraEfectivo();" class="btn btn-block btn-lg btn-default backColor btnPagar" value="REALIZAR PEDIDO">

</form>

And in JS it would be like that.

function registroCompraEfectivo(){

//por acá estarían las validaciones, que tienen return = false si no se cumple

//si se confirma todo, se devuelve la siguiente alerta: 

 swal({
                  title: '¿Realmente quiere realizar el pedido?',
                  text: "Si no está seguro, por favor, cancele. De lo contrario, ¡confirme!",
                  type: 'warning',
                  showCancelButton: true,
                  confirmButtonColor: '#3085d6',
                  cancelButtonColor: '#d33',
                  confirmButtonText: 'Confirmar'
                }).then((result) => {
                  if (result.value) {
                    swal(
                      '¡Confirmado!',
                      'Su pedido ha sido registrado con éxito.',
                      'success'
                    )
                    $("#formulario").submit();
                  }
                });

}