jQuery finestra di dialogo modale non invia il mio modulo

Question

Sto utilizzando una finestra di dialogo Modale jQuery per chiedere all'utente se desidera inviare il modulo o meno.

Tuttavia, dopo che l'utente fa clic sul pulsante Invia, il modulo non viene inviato.

Se poi faccio di nuovo clic sul pulsante di invio moduli, esso invia.

Sto indovinando che questo è un problema di ambito, ho visto alcuni altri post su di esso, ma finora ho trascorso molte ore senza fortuna. Qualche idea su come risolvere questo?

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

Cambiare l'attributo nome del pulsante di invio da 'submit' a 'btnSubmit'

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

Sostituire il '#' nel attribuisci l'attributo action allo spazio vuoto o qualsiasi altro URL valido.

Answer 2

La soluzione è semplicemente ... il nome del pulsante. Perchè lo chiedi? Ti mostrerò!

Prendere questo jsfiddle e notare che ho apportato solo alcune modifiche. Il javascript non è cambiato, solo l'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>​ 

Ho fatto due cambiamenti:

1. ho cambiato l'azione da una chiamata JavaScript per la compatibilità jsfiddle
2. Ho modificato il nome del pulsante in modo diverso da inviare

Ho dovuto fare # 2 perché chiamare $ ('# myform'). Submit faceva riferimento al pulsante, non al metodo submit e jQuery ha ottenuto tutti i tipi di confusi. Rinominando il tuo pulsante, $ ('# myform'). Submit rimane la funzione di invio jQuery prevista e tutti sono felici.

Mi sono imbattuto in questo attraverso diverse iterazioni, che ho tenuto sotto per i posteri.

Buona fortuna!

======= post originale SOTTO ========

Se tutto quello che vogliamo fare è "risolvere questo", è possibile refactoring come segue:

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

Stranamente, il seguito lavora s bene:

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

L'unica cosa che ho cambiato qui è stato rimosso il pulsante di invio e il 100% inviare tramite jQuery.

Answer 3

Si può provare il modulo on submit event hanno diversi tipi di eventi.

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

vedono questo EDIT, ora è possibile modificare a creare una funzione con Dialogo modale ritorno vero o falso.