Форма ловушки JQuery submit () - PullRequest
Новая
       10

Форма ловушки JQuery submit ()

12 голосов
/ 30 января 2012

В настоящее время я использую jquery, чтобы перехватить отправку формы и показать пользователям диалоговое окно для подтверждения.Если пользователь нажимает да, то форма должна быть отправлена.Если пользователь нажимает нет, закройте диалоговое окно.

Это все работает хорошо, но для одной проблемы: когда пользователь нажимает да, это снова вызывает тот же код, и диалоговое окно открывается снова. 

$("#myform").submit(function (event) {
    if (something) {
        var $dialog = $('<div></div>').dialog({
            buttons: {
                "OK": function () {
                    $dialog.dialog('close');
                    $("#myform").submit();
                    return;
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        $dialog.dialog('open');
        event.preventDefault();
        return false;
    } else {
        $("#myform").submit();
    }
});

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

Ответы [ 4 ]

13 голосов
/ 30 января 2012

Потому что, когда вы submit заполняете форму, событие submit снова запускается, и поэтому обработчик события. Вам нужно unbind обработчик событий submit, когда пользователь говорит OK. Попробуйте это 

$("#myform").submit(function (event) {
    if (something) {
        var $dialog = $('<div></div>').dialog({
            buttons: {
                "OK": function () {
                    $dialog.dialog('close');
                    //Check this line - unbinding the submit event handler
                    $("#myform").unbind('submit').submit();
                    return;
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        $dialog.dialog('open');
        event.preventDefault();
        return false;
    } else {
        $("#myform").submit();
    }
});
5 голосов
/ 30 января 2012

Вы должны возвратить false, когда OK: 

$("#myform").submit(function (event) {
    if (something) {
        var $dialog = $('<div></div>').dialog({
            buttons: {
                "OK": function () {
                    $dialog.dialog('close');
                    $("#myform").submit();
                    return false; // <=== not just return;
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        $dialog.dialog('open');
        event.preventDefault();
        return false;
    } else {
        $("#myform").submit();
    }
});

Или удалить ручную отправку: 

buttons: {
"OK": function () {
    $dialog.dialog('close');
    //$("#myform").submit();  <-- delete it
    return;
},
0 голосов
/ 30 января 2012

Вместо использования объекта jQuery для отправки формы, вы можете использовать элемент DOM, на который ссылается объект jQuery, для отправки формы.Это обходит обработчик событий jQuery.Ваша функция ОК будет выглядеть так: 

"OK": function () {
    $dialog.dialog('close');
    $("#myform").get(0).submit(); // use the underlying DOM element to sumbit
    return false;
},
0 голосов
/ 30 января 2012

Я бы сделал something глобальным пространством имен или значением из какого-то скрытого ввода, например: 

var something = nameSpaced.something ||  $('#hiddenInput').val(); //your choice
if (something) {
    ...
} ...

Тогда ваша логика должна работать нормально.

...