JQuery trap submit()

В настоящее время я использую 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();
    }
});

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

Ответы

Ответ 1

Потому что, когда вы 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();
    }
});

Ответ 2

Вы должны вернуть 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;
},

Ответ 3

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

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

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

Ответ 4

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

"OK": function () {
    $dialog.dialog('close');
    $("#myform").get(0).submit(); // use the underlying DOM element to sumbit
    return false;
},