0

Estoy haciendo un modal con un formulario en HTML. Una vez que los campos son validados en JavaScript (ya funciona correctamente) quiero que, al apretar el botón submit, aparezca una alerta de Sweet Alert para confirmar en envío. Si el usuario no confirma el envío, la idea es que se mantenga en el modal.

El problema es que al ingresar todos los datos correctos y dar clic en el botón submit, aparece la alerta pero se sale automáticamente, sin permitirme elegir entre 'cancelar' o 'confirmar' en la alerta.

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>
6
  • Y el modal en donde esta? deberías incluir un ejemplo mínimo comprobable para que te podamos ayudar. Aparte el modal lo haces con js puro? usas Bootstrap o Materialize?
    – Fran Islas
    Commented el 8 nov. 2018 a las 17:44
  • @DamianRicobelli debes aplicar un e.preventDefault(); para evitar que se cierre el sweet. Commented el 8 nov. 2018 a las 17:48
  • @FranIslas utilizo Bootstrap. El modal está maquetado en el comentario que puse del HTML, lo puse así ya que es un formulario extenso y no queria hacer un post enorme. Commented el 8 nov. 2018 a las 17:53
  • @GustavoHerrera me indicarías dónde debo utilizar el e.preventDefault() ? Porque si tu idea es que detenga la acción submit, también debería indicar que el botón de "Confirmar" dentro de la alerta, lo continúe. Commented el 8 nov. 2018 a las 17:57
  • @DamianRicobelli al intentar ejecutar la accion al lado debes colocar ;return false por ejemplo onsubmit="registroCompraEfectivo(); return false Commented el 8 nov. 2018 a las 18:02

1 respuesta 1

0

Tienes que quitar el método onsubmit del form y el input pasarlo a type="button" y agregar el onclick="registroCompraEfectivo();" al input, te dejo un ejemplo espero te funcione.

<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>

Y en JS quedaría así.

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();
                  }
                });

}
1
  • Gracias por tu colaboración! En una hora aproximadamente estaré probando tu solución y te diré si funciona :D Commented el 8 nov. 2018 a las 18:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.