JQuery отображает диалог подтверждения при отправке формы

Question

Мне нужно отобразить диалоговое окно подтверждения при нажатии на изображение. Код в разделе изображения «onclick» должен выполняться только в том случае, если диалог подтверждения jquery вернул true.

В этот момент, когда пользователь нажимает на $ (". Submit_image") - отображается диалоговое окно, но форма все еще отправляется.

Логика должна быть одинаковой как для плагина jquery.alerts, так и для обычного диалога подтверждения 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

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

Может быть? jQuery требует, чтобы вы возвращали «false» из функции .click, чтобы остановить действие по умолчанию, и сейчас вы ничего не возвращаете из этой функции.

* РЕДАКТИРОВАТЬ *

Я только что посмотрел на jConfirm, и из-за того, как он работает (в частности, потому что он ничего не возвращает; он может только вернуть значение посредством обратного вызова), невозможно использовать его так, как вы хотите. Вместо этого вам нужно ВСЕГДА возвращать false из вашего обработчика 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 2

Вам нужно разбить ваши события. Один для того, чтобы изображение щелкнуло для вызова отправки формы, а затем для отправки формы, которая является подходящим местом для «ложного» возврата, чтобы остановить отправку формы.

Answer 3

Я нашел решение своей проблемы, но некоторые изменения в существующем коде все еще необходимо выполнить.

В 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 () для предотвращения события по умолчанию для привязки, которая идет по ссылке или javascript в разделе href. Как я понимаю, в моем исходном коде «return = false» или protectDefault () не работали для меня, потому что тег «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');
    });
   });
});