Jquery zeigt Bestätigungsdialog beim Absenden des Formulars an

Question

Ich muss beim Klicken auf das Bild einen Bestätigungsdialog anzeigen.Code im Abschnitt „onclick“ des Bildes sollte nur ausgeführt werden, wenn der JQuery-Bestätigungsdialog „true“ zurückgegeben hat.

Wenn der Benutzer zu diesem Zeitpunkt auf $(".submit_image") klickt, wird ein Dialog angezeigt, das Formular wird jedoch noch gesendet.

Die Logik sollte sowohl für das jquery.alerts-Plugin als auch für den regulären Javascript-Bestätigungsdialog identisch sein.

<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

Ich habe eine Lösung für mein Problem gefunden, es müssen jedoch noch einige Änderungen am vorhandenen Code vorgenommen werden.

In HTML habe ich das Bild innerhalb des Ankertags mit href = zu dem platziert, was ich im Bild-OnClick-Ereignis hatte.

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

Methode e.preventDefault() hinzugefügt, um ein Standardereignis für den Anker zu verhindern, der dem Link oder Javascript im href-Abschnitt folgt.Soweit ich weiß, haben „return=false“ oder „preventDefault()“ bei mir in meinem ursprünglichen Code nicht funktioniert, da das „img“-Tag keine Standardaktion hat.

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

Vielleicht? JQuery braucht Sie, um "false" aus der .click -Funktion zurückzugeben, um die Standardaktion zu stoppen, und im Moment gibt Sie nichts von dieser Funktion zurück.

* BEARBEITEN *

Ich habe mich nur mit JConfirm angesehen, und weil es funktioniert (insbesondere weil es nichts zurückgibt; es kann den Wert nur über seinen Rückruf zurückgeben), ist es unmöglich, ihn so zu verwenden, wie Sie es möchten. Was Sie stattdessen tun müssen, ist immer immer falsch von Ihrem Onclick -Handler zurückzukehren und dann in Ihrem JConfirm -Rückruf eine Formulierung manuell aufzurufen.

Beispiel:

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

Sie müssen Ihre Veranstaltungen auflösen. Eines für das Bild des Bildes, um Formular's OnSubmit zu nennen und dann das OnSubmit zu formen, was der geeignete Ort für die "falsche" Rückkehr ist, um die Einreichung von Formular zu stoppen.