Jquery mostra la finestra di conferma sull'invio del modulo

Question

Devo visualizzare la finestra di conferma sul clic dell'immagine. Codice in " onclick " la sezione dell'immagine dovrebbe essere eseguita solo se la finestra di dialogo di conferma jquery è tornata vera.

A questo punto quando l'utente fa clic su $ (" .submit_image ") - viene visualizzata la finestra di dialogo, ma il modulo viene comunque inviato.

La logica dovrebbe essere la stessa sia per il plugin jquery.alerts che per la normale finestra di dialogo di conferma javascript.

<form name="myform">
<img class="submit_image" onclick="myform.field1.value='1';myform.field1.value='2'; myform.submit();">
</form>


$(document).ready(function(){
   // catch submit 
   $(".submit_image").click(function(e){
       jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
      return r;
       });
   });
});

Answer 1

Ho trovato una soluzione al mio problema, ma alcune modifiche al codice esistente devono ancora essere eseguite.

In html ho inserito l'immagine all'interno del tag anchor con href = a quello che avevo nell'evento onclick dell'immagine.

<form name="myform">
<a href="javascript: myform.field1.value='1';myform.field2.value='2'; myform.submit();" class="submit_image_link"><img src="..."></a>
</form>

Aggiunto il metodo e.preventDefault () per prevenire l'evento predefinito per l'ancoraggio, che segue il collegamento o javascript nella sezione href. A quanto ho capito, " return = false " oppure preventDefault () non ha funzionato per me nel mio codice originale, perché " img " il tag non ha alcuna azione predefinita.

$(document).ready(function(){
   // catch submit 
   $(".submit_image_link").click(function(e){
    e.preventDefault();
    jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
        if (r) location.href = $(".submit_image_link").attr('href');
    });
   });
});

Answer 2

return jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
  return r;
});

Forse? jQuery ha bisogno che tu restituisca " false " dalla funzione .click per interrompere l'azione predefinita e in questo momento non stai restituendo nulla da quella funzione.

* EDIT *

Ho appena guardato jConfirm, e per come funziona (in particolare perché non restituisce nulla; può solo restituire il valore tramite il suo callback) è impossibile usarlo nel modo desiderato. Quello che devi fare invece è SEMPRE restituire SEMPRE false dal tuo gestore onclick, quindi nel tuo callback jConfirm invocare manualmente l'invio di un modulo.

Esempio:

$(document).ready(function(){
  // catch submit 
  $(".submit_image").click(function(e){
    jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
      // If they confirmed, manually trigger a form submission
      if (r) $(".submit_image").parents("FORM").submit();
    });
    // Always return false here since we don't know what jConfirm is going to do
    return false;
  });
});

Answer 3

Devi interrompere i tuoi eventi. Uno per il clic sull'immagine per chiamare onsubmit del modulo, quindi onsubmit del modulo, che è il luogo appropriato per il ritorno "falso" per interrompere l'invio del modulo.