Модальное диалоговое окно jQuery не отправляет мою форму

Question

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

Однако после того, как пользователь нажмет кнопку «Отправить» в диалоговом окне, форма не будет отправлена.

Если я снова нажму кнопку отправки формы, она будет отправлена.

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

Javascript

$(document).ready(function(){
    var submitForm = $('#myform');
    submit = false;

    $("#confirm").dialog({
        resizable: false,
        height: 140,
        modal: true,
        autoOpen: false,
        buttons: {
            'Submit': function() {
                $(this).dialog('close');
                submit = true;
                submitForm.submit();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    });
    $("#confirm").parent().appendTo($("#myform")); 

    submitForm.submit(function() {
        if (submit) {
            return true;
        } else {
            $("#confirm").dialog('open');
            return false;
        }
    });
});

HTML

<form id="myform" action="#" method="post">
    <input type="text" name="check_me" />
    <input type="submit" name="submit" value="Go!" />
</form>
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>

Answer 1

Решение - просто ... ваше имя кнопки.Почему ты спрашиваешь?Я покажу вам!

Возьмите это jsfiddle и обратите внимание, что я только внес несколько изменений.Javascript не изменился, только HTML

HTML

<form id="myform" action="javascript:alert('Success!')" method="post">
    <input type="text" name="check_me" />
    <input type="submit" name="btnSubmit" value="Go!" />
</form>
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​

Я сделал два изменения:

1. Я изменилдействие, чтобы быть вызовом javascript для совместимости с jsfiddle
2. Я изменил имя вашей кнопки на что-то отличное от submit

Я должен был сделать # 2, потому что вызывал $ ('# myform').submit ссылался на кнопку, а не на метод submit, и jQuery запутался во всех его проявлениях.Переименовав вашу кнопку, $ ('# myform'). Submit остается ожидаемой функцией отправки jQuery, и все довольны.

Я наткнулся на это, пройдя несколько итераций, которые я оставил ниже для потомков..

Удачи!

======= ОРИГИНАЛЬНАЯ ПОЧТА НИЖЕ ======= *

Если все, что вы хотитечтобы сделать это «решить эту проблему», вы можете выполнить рефакторинг следующим образом:

HTML

<form id="myform" action="#" method="post">
    <input type="text" name="check_me" />
    <input type="button" id="btnSubmit" value="Go!" />
</form>
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​

JavaScript

$(document).ready(function(){
    var submitForm = $('#myform');
    submit = false;

    $("#confirm").dialog({
        resizable: false,
        height: 140,
        modal: true,
        autoOpen: false,
        buttons: {
            'Submit': function() {
                $(this).dialog('close');
                submit = true;
                submitForm.submit();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    });
    $("#confirm").parent().appendTo($("#myform")); 

    $("#btnSubmit").click(function() {
        $("#confirm").dialog('open');
    });

    submitForm.submit(function() {
        if (submit) {
            return true;
        }
    });
});​

Как ни странно, ниже работает также:

HTML

<form id="myform" action="javascript:alert('success!');" method="post">
    <input type="text" name="check_me" />
    <input type="button" id="btnSubmit" value="Go!" />
</form>
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​

JavaScript

$(document).ready(function(){
    var submitForm = $('#myform');
    submit = false;

    $("#confirm").dialog({
        resizable: false,
        height: 140,
        modal: true,
        autoOpen: false,
        buttons: {
            'Submit': function() {
                $(this).dialog('close');
                submit = true;
                $('#myform').submit();
                //submitForm.submit();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    });
    $("#confirm").parent().appendTo($("#myform")); 
    $("#btnSubmit").click(function() { $('#myform').submit(); });

    submitForm.submit(function() {
        if (submit) {
            return true;
        } else {
            $("#confirm").dialog('open');
            return false;
        }
    });
});​

Единственное, что я здесь изменил, это убрал кнопку отправки и 100% отправку через jQuery.

Answer 2

Измените атрибут имени вашей кнопки отправки с 'submit' на 'btnSubmit'

<input type="submit" name="btnSubmit" value="Go!" />

Замените '#' в атрибуте действия формы пустым или любым другим допустимым URL-адресом.

Answer 3

Вы можете попробовать при отправке события * Форма 1002 * имеет другой тип событий.

onsubmit="return confirm('Please confirm that you want to submit')"

посмотреть это РЕДАКТИРОВАТЬ , теперь вы можетеизменить создать одну функцию с Modal Dialog вернуть true или false.