يعرض Jquery مربع حوار التأكيد عند إرسال النموذج

Question

أحتاج إلى عرض مربع حوار التأكيد عند النقر على الصورة.يجب تنفيذ التعليمات البرمجية الموجودة في قسم "onclick" من الصورة فقط إذا كان مربع حوار تأكيد jquery صحيحًا.

عند هذه النقطة عندما ينقر المستخدم على $(".submit_image") - يتم عرض مربع الحوار، ولكن لا يزال النموذج قيد الإرسال.

يجب أن يكون المنطق هو نفسه لكل من البرنامج المساعد jquery.alerts أو مربع حوار تأكيد جافا سكريبت العادي.

<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

لقد وجدت حلاً لمشكلتي، ولكن لا يزال يتعين إجراء بعض التغييرات في التعليمات البرمجية الموجودة.

في HTML، قمت بوضع صورة داخل علامة الربط باستخدام href = لما كان لدي في حدث onclick للصورة.

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

تمت إضافة طريقة e.preventDefault() لمنع الحدث الافتراضي للارتساء، والذي يتبع الرابط أو جافا سكريبت في قسم href.كما أفهم، "return=false" أو PreventDefault() لم يعمل معي في الكود الأصلي، لأن علامة "img" لا تحتوي على أي إجراء افتراضي.

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

يمكن؟ يحتاجك jQuery إلى إعادة "False" من وظيفة .click لإيقاف الإجراء الافتراضي ، والآن لا تعيد أي شيء من هذه الوظيفة.

* تعديل *

لقد نظرت للتو إلى JConfirm ، وبسبب كيفية عمله (على وجه التحديد لأنه لا يعيد أي شيء ؛ يمكنه فقط إرجاع القيمة من خلال رد الاتصال) ، من المستحيل استخدامها بالطريقة التي تريدها. ما ستحتاج إلى القيام به بدلاً من ذلك هو العودة دائمًا إلى معالج Onclick الخاص بك ، ثم في رد الاتصال JConfirm الخاص بك يدويًا.

مثال:

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

تحتاج إلى تفكيك الأحداث الخاصة بك. واحد من أجل onClick الخاص بالصورة للاتصال بـ OnSubmit ، ثم OnSubmit ، وهو المكان المناسب للعودة "False" إلى إيقاف تقديم النموذج.