El cuadro de diálogo modal de jQuery no envía mi formulario

Question

Estoy usando un cuadro de diálogo modal jQuery para preguntarle al usuario si desea enviar el formulario o no.

Sin embargo, después de que el usuario haga clic en el botón Enviar de Dialog, el formulario no se está enviando.

Si vuelvo a hacer clic en el botón enviar formularios, se envía.

Supongo que este es un problema de alcance, he visto algunas otras publicaciones al respecto, pero hasta ahora he pasado muchas horas sin suerte. ¿Alguna idea sobre cómo resolver esto?

Javascript

$(document).ready(function(){ 
    var submitForm = $('#myform'); 
    submit = false; 

    $("#confirm").dialog({ 
     resizable: false, 
     height: 140, 
     modal: true, 
     autoOpen: false, 
     buttons: { 
      'Submit': function() { 
       $(this).dialog('close'); 
       submit = true; 
       submitForm.submit(); 
      }, 
      'Cancel': function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
    $("#confirm").parent().appendTo($("#myform")); 

    submitForm.submit(function() { 
     if (submit) { 
      return true; 
     } else { 
      $("#confirm").dialog('open'); 
      return false; 
     } 
    }); 
}); 

HTML

<form id="myform" action="#" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="submit" name="submit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div> 

Answer 1

Cambiar el atributo de nombre de su botón de envío de 'enviar' a 'btnSubmit'

<input type="submit" name="btnSubmit" value="Go!" /> 

Reemplazar el '#' en el forma atributo de acción en blanco o cualquier otra URL válida.

Answer 2

La solución es simplemente ... el nombre de su botón. ¿Porque preguntas? ¡Te mostraré!

Tome este jsfiddle y observe que solo hice algunos cambios. El javascript no ha cambiado, sólo el HTML

HTML

<form id="myform" action="javascript:alert('Success!')" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="submit" name="btnSubmit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​ 

He hecho dos cambios:

1. cambié la acción a ser una llamada de JavaScript para la compatibilidad jsFiddle
2. Modifiqué el nombre de su botón a algo diferente a enviar

Tuve que hacer el n. ° 2 porque llamar $ ('# myform'). Submit hacía referencia al botón, no al método de envío, y jQuery se confundía por completo. Al renombrar su botón, el $ ('# myform'). Submit sigue siendo la función de envío jQuery esperada y todo el mundo está contento.

Me tropecé con esto al pasar por varias iteraciones, que he guardado a continuación para la posteridad.

¡Buena suerte!

======= post original ABAJO ========

Si todo lo que queremos hacer es "resolver esto", puede refactorizar de la siguiente manera:

HTML

<form id="myform" action="#" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="button" id="btnSubmit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​ 

JavaScript

$(document).ready(function(){ 
    var submitForm = $('#myform'); 
    submit = false; 

    $("#confirm").dialog({ 
     resizable: false, 
     height: 140, 
     modal: true, 
     autoOpen: false, 
     buttons: { 
      'Submit': function() { 
       $(this).dialog('close'); 
       submit = true; 
       submitForm.submit(); 
      }, 
      'Cancel': function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
    $("#confirm").parent().appendTo($("#myform")); 

    $("#btnSubmit").click(function() { 
     $("#confirm").dialog('open'); 
    }); 

    submitForm.submit(function() { 
     if (submit) { 
      return true; 
     } 
    }); 
});​ 

Curiosamente, el siguiente funciona una Es bien:

HTML

<form id="myform" action="javascript:alert('success!');" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="button" id="btnSubmit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​ 

JavaScript

$(document).ready(function(){ 
    var submitForm = $('#myform'); 
    submit = false; 

    $("#confirm").dialog({ 
     resizable: false, 
     height: 140, 
     modal: true, 
     autoOpen: false, 
     buttons: { 
      'Submit': function() { 
       $(this).dialog('close'); 
       submit = true; 
       $('#myform').submit(); 
       //submitForm.submit(); 
      }, 
      'Cancel': function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
    $("#confirm").parent().appendTo($("#myform")); 
    $("#btnSubmit").click(function() { $('#myform').submit(); }); 

    submitForm.submit(function() { 
     if (submit) { 
      return true; 
     } else { 
      $("#confirm").dialog('open'); 
      return false; 
     } 
    }); 
});​ 

La única cosa que ha cambiado aquí se eliminó el botón de enviar y 100% envíe a través de jQuery.

Answer 3

Puede probar el formulario on submit event tener diferentes tipos de eventos.

onsubmit="return confirm('Please confirm that you want to submit')" 

ver este EDIT, ahora se puede cambiar a crear una función con diálogo modal volver verdadero o falso.