Jquery отображает диалоговое окно подтверждения отправки формы
-
05-07-2019 - |
Вопрос
Мне нужно отобразить диалоговое окно подтверждения при нажатии на изображение.Код в разделе "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;
});
});
});
Решение 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');
});
});
});
Другие советы
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;
});
});
Вы должны разбить свои события. Один для того, чтобы изображение щелкнуло для вызова отправки формы, а затем для отправки формы, которая является подходящим местом для «ложного» возврата, чтобы остановить отправку формы.