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

Мне нужно отображать диалоговое окно подтверждения при нажатии на изображение. Код в разделе изображения 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;
       });
   });
});

person Kelvin    schedule 11.09.2009    source источник


Ответы (3)


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;
  });
});
person machineghost    schedule 11.09.2009
comment
Что ж, мое объяснение остается правильным, я просто не знаю, как работает эта безумная штука с jConfirm. Куда возвращается функция (r)? Вам нужно это выяснить. В качестве альтернативы вы можете просто использовать обычный диалог window.confirm (который возвращает true / false в зависимости от того, что выбрал пользователь), но если вы не хотите этого делать, вам нужно прочитать документацию вашей функции jConfirm, чтобы выяснить, как получить от него истину / ложь (а затем вернуть это истина / ложь). - person machineghost; 11.09.2009
comment
Кельвин, просмотрите мой измененный ответ выше и дайте мне знать, сработало ли оно для вас. - person machineghost; 11.09.2009
comment
Спасибо за ответ machineghost. Я попробовал эту идею, но безуспешно. Я думаю, что return false не препятствует отправке формы, поскольку она выполняется в событии щелчка. - person Kelvin; 11.09.2009
comment
Это не может быть проблемой. Если вы мне не верите, попробуйте следующее: поскольку вы увидите, что false, возвращаемое из изображения onClick, предотвращает появление формы onSubmit: ‹html› ‹head› ‹script› ‹/script› ‹body› ‹форма onSubmit = alert ('test')› ‹input type = image src = sstatic.net/so/img/logo.png onclick = return false / ›‹/Form› ‹/body› ‹/html› - person machineghost; 11.09.2009
comment
Если вы сократите свой код до одного, кроме следующего, форма все еще будет отправлена? Кроме того, есть ли у вас какие-либо другие обработчики событий, подключенные к тем же элементам? $ (document) .ready (function () {// поймать submit $ (. submit_image) .click (function (e) {return false});}); - person machineghost; 11.09.2009
comment
То, что вы делаете в этом примере, немного отличается от того, что делаю я. Я не могу изменить существующее событие onclick непосредственно в теге изображения, изменив его на return = false. Вот что у меня есть: ‹! - html -› ‹form onSubmit = alert ('test')› ‹input type = image class = testbtn src = sstatic.net / so / img / logo.png; onclick = submit (); / ›‹/form›‹! - js - ›$ (. testbtn) .click (function (e) {return false;}); - person Kelvin; 11.09.2009
comment
Хорошо, теперь мы куда-то добираемся; то, что вы только что опубликовали, значительно отличается от кода в исходном вопросе. В приведенном выше примере просто удалите часть onclick = submit (); вам это не нужно, потому что ваш обратный вызов из JConfirm вызовет submit () (при необходимости. - person machineghost; 12.09.2009
comment
(Если вы используете пример кода, который я предоставил в этом ответе, я имею в виду) - person machineghost; 12.09.2009
comment
привет machineghost, большое спасибо за вашу помощь. пожалуйста, посмотрите мой ответ ниже. - person Kelvin; 12.09.2009

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

person Jeff Ober    schedule 11.09.2009
comment
Джефф, не следует ли препятствовать тому, чтобы onClick изображения предотвращал появление формы onsubmit (через вызов stopPropagation, который jQuery сделает, если вы вернете false)? - person machineghost; 11.09.2009

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

В html я поместил изображение внутри тега привязки с href = к тому, что у меня было в событии image 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» или 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');
    });
   });
});
person Kelvin    schedule 11.09.2009
comment
Хорошо, три проблемы .... 1) Вместо использования a, обернутого вокруг IMG и использования JS для отправки, есть гораздо более простой способ: просто используйте ‹input type = image /›; он даже имеет встроенную логику отправки ... 2) Возвращение false из обработчика событий, подключенного к jQuery, ИДЕНТИЧНО для вызова e.preventDefault (); e.stopPropagation (); из этого обработчика ... см. docs.jquery.com/Events/bind ... 3 ) Если кто-то тратит свое время, помогая ответить на ваш вопрос, будет довольно грубо придумать собственный ответ и лишить его всякой чести за все время, которое они потратили. - person machineghost; 12.09.2009
comment
4) если вы собираетесь использовать A / IMG (вместо INPUT [type = 'image']), вам не нужен myform.submit в href вашего A, как и e.preventDefault; вот что вызывает все проблемы. Все, что вам нужно, это вызов отправки в обратном вызове JConfirm. В этом разница между сообщением "Отправить" каждый раз, когда на него нажимают; подожди, ты нажал? не подчиняться; вы подтвердили? хорошо, теперь отправляем и говорите, что подтвердили? Отправить. С вашим e.preventDefault вы ВСЕГДА предотвращаете выполнение действия по умолчанию на A; если вы собираетесь это сделать, то с таким же успехом можете вообще не подключать его. - person machineghost; 12.09.2009
comment
Привет, machineghost, извините, если я вас чем-то обидел, я определенно не хотел. Я еще раз повторю, что ценю вашу помощь. Я пока не могу проголосовать за ваш пост, так как у меня недостаточно высокая репутация в профиле. Теперь, что касается других ваших исправлений: 1) Я не использовал ‹input type = image /›, так как я не хотел сильно изменять существующий код (кроме того, эта кнопка находится вне формы). 2) Да, это правильно, я с вами согласен. 4) Я сохранил исходный код, поэтому остальная часть старого приложения не пострадает. Но я согласен с вами, что так было бы лучше. Еще раз спасибо за вашу помощь. - person Kelvin; 12.09.2009
comment
Я пока не могу проголосовать за ваш пост. Приношу свои извинения, я забыл, что некоторые люди не могли одобрять ответы (и раньше у меня были люди, которые принимали мой ответ, а затем утверждали свой собственный ответ, поэтому я бросил удар). Рад, что смог оказать помощь. - person machineghost; 12.09.2009