JQuery на проверку подтверждения, с модальным диалогом в конце?

Question

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

var userConfirmed = false;

$("#dialog").dialog({
    buttons: {
        "Yes": function() {
            userConfirmed = true;
            $("#inputform").submit();
        },
        "No, I'll change them.": function() {
            $(this).dialog("close");
        }
    }
});

// check they've submitted what they need to
$("form").submit(function() {

    // lots of these
    if (something) {
        return false;
    }

    $("#dialog").dialog("open");

    return userConfirmed;

});

Первоначальная проверка работает нормально - она ​​проверяет критерии и помечается как подходящая, и, если ни один из этих критериев не выполняется, она отображает модальное окно так, как я хочу.Пока все хорошо.

Проблема, однако, в том, что когда я нажимаю «да», чтобы отправить форму, она не отправляется, пока вы снова не нажмете кнопку «Отправить», аааа!Любой звонок для отправки форума с использованием jQuery завершается неудачей.

Любые предложения приветствуются, спасибо.

Answer 1

как всегда, я рекомендую использовать jQuery validate для проверки, тогда код будет выглядеть следующим образом

$("#formid").validate({
    submitHandler: function(form) {
               $("#dialog").dialog({
     buttons: {
         "Ok": function() {
             form.submit();
             $(this).dialog("close");
         },
         "Cancel": function() {
             $(this).dialog("close");
         }
     }
});
    }
});

LIVE DEMO

Answer 2

Тот факт, что диалоговое окно открывается, не останавливает выполнение кода.valToReturn возвращается $("form").submit() до того, как оно будет установлено.

Вы можете сделать что-то вроде этого:

//Save the default behavior to break any loops
var defaultSubmit = $.extend(true, {}, $("form").submit);

$("form").submit(function(e) {

    var valToReturn = true;

    // lots of these
    if (something) {
        return false;
    }

    // popup the dialog confirmation
    $("#dialog").dialog({
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
                defaultSubmit(); // User confirmed, submit form.
            },
            "Cancel": function() {
                $(this).dialog("close"); // Form already prevented from submitting. Exit quietly.
            }
        }
    });

    $("#dialog").dialog("open");

    return false; // Prevent form from being submitted

});

Answer 3

Добавьте где-нибудь флаг, сообщающий, появилось ли диалоговое окно или нет, и пользователь нажал «да». Пример:

var userConfirmed = false;
$("form").submit(function(e) {
    if ( userConfirmed ) {
        userConfirmed = false; // Reset it to false
        return true; // No need to validate anything, that was already done last time
    }
    var form = $(this);
    // ...
        "Yes": function() {
            userConfirmed = true; // Confirm that the dialog was shown and the user clicked "Yes"
            $(this).dialog("close");
            form.submit(); // Try again; this time, the validation was already done
        },
    // ...
    return false; // Don't submit; the user haven't confirmed the info on the dialog
});

Без этого флага вы оказались бы в ситуации "курица и яйцо": команда submit открывает диалоговое окно, а диалоговое окно, вызывающее $("form").submit(), снова открывает диалоговое окно ...

Если у вас много форм и вы не хотите использовать «глобальную» переменную, вы можете использовать data для той же цели.

Обновление: живой пример на jsFiddle . Успешно протестировано в Chrome и Firefox (через 3 секунды после отправки будет отображаться пустая страница).

Answer 4

Я бы прикрепил событие к кнопке, а не к форме.Просто прикрепите его к нажатию кнопки отправки.Затем вы можете использовать event.preventDefault(), чтобы удержать форму от отправки до подтверждения диалога.В функции «Да» просто введите $('form').submit().Не нужно беспокоиться и о возвращаемом значении.