Jquery trap form submit()

Question

Attualmente sto utilizzando jquery per intercettare l'invio di un modulo e mostrare agli utenti una finestra di dialogo per la conferma. Se l'utente fa clic sì, allora il modulo deve inviare. Se l'utente fa clic su no, quindi chiude la finestra di dialogo.

Tutto questo funziona bene ma per un problema: quando l'utente fa clic su Sì, attiva nuovamente lo stesso codice e la finestra di dialogo viene riaperta.

$("#myform").submit(function (event) { 
    if (something) { 
     var $dialog = $('<div></div>').dialog({ 
      buttons: { 
       "OK": function() { 
        $dialog.dialog('close'); 
        $("#myform").submit(); 
        return; 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $dialog.dialog('open'); 
     event.preventDefault(); 
     return false; 
    } else { 
     $("#myform").submit(); 
    } 
}); 

Capisco perché questo sta accadendo, solo non sono sicuro sul modo migliore per aggirare. Mi rendo conto che potrei mostrare la modale al clic del pulsante, invece del modulo submit, ma questo non risolve il problema di premere il pulsante Invio sulla tastiera per inviare il modulo.

Answer 1

Perché quando si submit il modulo, l'evento submit innesca di nuovo e così il gestore di eventi. È necessario unbind il gestore di eventi submit quando l'utente dice OK. Prova questa

$("#myform").submit(function (event) { 
    if (something) { 
     var $dialog = $('<div></div>').dialog({ 
      buttons: { 
       "OK": function() { 
        $dialog.dialog('close'); 
        //Check this line - unbinding the submit event handler 
        $("#myform").unbind('submit').submit(); 
        return; 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $dialog.dialog('open'); 
     event.preventDefault(); 
     return false; 
    } else { 
     $("#myform").submit(); 
    } 
}); 

Answer 2

Si dovrebbe restituire false quando OK:

$("#myform").submit(function (event) { 
    if (something) { 
     var $dialog = $('<div></div>').dialog({ 
      buttons: { 
       "OK": function() { 
        $dialog.dialog('close'); 
        $("#myform").submit(); 
        return false; // <=== not just return; 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $dialog.dialog('open'); 
     event.preventDefault(); 
     return false; 
    } else { 
     $("#myform").submit(); 
    } 
}); 

Oppure cancellare il manuale di presentare:

buttons: { 
"OK": function() { 
    $dialog.dialog('close'); 
    //$("#myform").submit(); <-- delete it 
    return; 
}, 

Answer 3

vorrei fare something o un namespace, o un valore globale di qualche input nascosto in questo modo:

var something = nameSpaced.something || $('#hiddenInput').val(); //your choice 
if (something) { 
    ... 
} ... 

La logica dovrebbe funzionare normalmente, allora.

Answer 4

Inche, prima di utilizzare l'oggetto jQuery per inviare il modulo, è possibile utilizzare l'elemento DOM a cui fa riferimento l'oggetto jQuery per inviare il modulo. Questo aggira il gestore di eventi jQuery. La tua funzione OK sarebbe simile a questa:

"OK": function() { 
    $dialog.dialog('close'); 
    $("#myform").get(0).submit(); // use the underlying DOM element to sumbit 
    return false; 
},