4

Hace un tiempo estoy trabajando con JavaScript y jQuery, y queriendo llevar a cabo una funcionalidad bastante sencilla, me he topado con un pequeño problema (relacionado específicamente a las promesas)

Pretendo usar la librería SweetAlert2 para preguntarle al usuario, si está seguro que desea enviar el formulario, existe una pregunta relacionada pero porfavor leerla primero antes de marcar duplicado, ya que las dudas sin distintas.

Estoy utilizando el evento submit de jQuery, para, con swal2, preguntarle al usuario, lo hago de la siguiente manera:

$('#formulario').on('submit',
    () => {        
        const url = '@Url.Action("ValidarRefrigeracionDeCuba")';
        const codigoDelfos = $('#@Html.IdFor(x => x.CodigoDelfos)').val();
        $.get(url, { codigoDelfos: codigoDelfos }, (result, status) => {
            if(result.Objeto == true)
                return Swal.fire({
                    title: '¡Advertencia!',
                    text: "¡El transformador no tiene cargada ninguna refrigeración de cuba en Delfos!",
                    type: 'warning',
                    showCancelButton: true,                
                    confirmButtonText: 'Continuar de todas formas'
                }).then((result) => {                    
                    return result.value === true;
                });
        });
    });

Pero el formulario (lógicamente) se envía antes de que se resuelva la promesa.

Intente hacerlo usando async/await, pero no tuve éxito, ya que el formulario, también, siempre se enviaba.

¿Cúal es la solución a esta problemática?

3
  • Puedes cancelar el envió del formulario en el evento y enviarlo tu de manera "forzada" cuando se complete la promesa
    – x3k
    Commented el 12 dic. 2019 a las 12:17
  • @x3k_js Gracias! Se que puedo hacerlo enviando el formulario por ajax, Pero mi idea, sería que se envíe con el método ''por defecto'' para poder hacer uso de las validaciones por defecto de asp mvc 5 Commented el 12 dic. 2019 a las 12:20
  • Te he dejado un ejemplo. Si no te vale lo borro :)
    – x3k
    Commented el 12 dic. 2019 a las 12:31

2 respuestas 2

4

Básicamente lo que te comentaba era hacer el preventDefault()del event y después forzar el submit mediante JS.

El submit lo hago mediante JS document.getElementById("formulario").submit(); por que no activa lo eventos. Si lo hiciese con jQuery al hacer el $(this).submit(); o $("#formulario").submit(); se volvería a lanzar el evento -> se volvería a cancelar el evento -> lo volveria a llamar... Y así en bucle.

Supongo que las validaciones que comentas se harán igualmente.

Te dejo este snippet:

$('#formulario').on('submit', function(event){
  event.preventDefault(); //Cancelas el envio de formulario
  setTimeout(function(){ 
    console.log("Hello");
    document.getElementById("formulario").submit(); // Fuerzas el envió del formulario
  }, 3000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="formulario">
  <input type="text">
  <input type="submit">
</form>

1
  • Muchas gracias! No sabía que el submit() de un objeto de JavaScript nativo, era distinto al submit() de jQuery! Commented el 12 dic. 2019 a las 12:39
0
mira que primero hace la pregunta, y si le da en confirmar se envió el formulario desde aquí.


function preguntar(event) {

 event.preventDefault();
 Swal.fire({
      title: 'Guardar caso',
      text: '¿Desea guardar los cambios?',
      icon: 'question',
      showDenyButton: true,
      confirmButtonText: 'Guardar',
      confirmButtonColor: '#3085d6',
      denyButtonColor: '#d33',
      denyButtonText: `No guardar`,
 }).then((result) => {
      if (result.isConfirmed) {
           var form = $('#miFormulario');
           form.submit();
           Swal.fire('Guardado!', 'El caso ha sido guardado', 'success')

           if(form.value()){
                Headers(refresh, 30)
           window.location.href = "/views/revisar_caso.php";
           }
      }if (result.isDenied) {
           Swal.fire('Caso no guardado', '', 'info')
      }else{
           Swal.fire('Campos vacios', '', 'info')
      }
 });
}

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.