Jquery affichant une boîte de dialogue de confirmation lors de l'envoi du formulaire

Question

Je dois afficher la boîte de dialogue de confirmation en cliquant sur l'image. Code dans " onclick " La section de l'image ne doit être exécutée que si la boîte de dialogue de confirmation jQuery renvoie true.

À ce stade, lorsque l'utilisateur clique sur la boîte de dialogue $ (" .submit_image ") -) est affichée, le formulaire est toujours soumis.

La logique doit être identique pour le plug-in jquery.alerts ou la boîte de dialogue de confirmation javascript normale.

<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

J'ai trouvé une solution à mon problème, mais certaines modifications du code existant doivent encore être effectuées.

En html, j'ai placé l'image à l'intérieur de la balise anchor avec href = sur ce que j'avais dans l'événement on on click image.

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

Ajout de la méthode e.preventDefault () pour empêcher l’événement par défaut pour anchor, qui suit le lien ou le javascript dans la section href. Si je comprends bien, " return = false " ou preventDefault () n'a pas fonctionné pour moi dans mon code d'origine, car "img". La balise n'a aucune action par défaut.

$(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;
});

Peut-être? jQuery a besoin que vous retourniez " false " de la fonction .click pour arrêter l'action par défaut, et pour l'instant, vous ne renvoyez rien à partir de cette fonction.

* EDIT *

Je viens de regarder jConfirm, et à cause de son fonctionnement (en particulier parce qu'il ne retourne rien; il ne peut renvoyer la valeur que via son rappel), il est impossible de l'utiliser comme vous le souhaitez. A la place, vous devrez simplement TOUJOURS renvoyer false à partir de votre gestionnaire onclick, puis dans votre rappel jConfirm appeler manuellement une soumission de formulaire.

Exemple:

$(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

Vous devez diviser vos événements. Une pour l’image onclick pour appeler l’envoi du formulaire, puis pour l’envoi du formulaire, qui est le lieu approprié pour le «faux» retour afin d’arrêter la soumission du formulaire.