Question

我有一个表单，我希望用户在尝试提交时确认其中一个值，我希望在jQuery UI模式对话框中进行确认。

代码看起来像这样：

valuesCheck = function(event) {
    $j("#proposal-form-errors")
        .dialog({
            modal: true,
            width: 600,
            title: 'Values Confirmation',
            buttons: {
                "Confirm values and submit proposal": function () {
                    $form = $j('form#proposal');
                    $form.addClass('values-confirmed');
                    $j(this).dialog("destroy");
                    $form.submit();
                },
                "Continue editing": function () {
                    $j(this).dialog("destroy");
                }
            }
        })
        .html('<p>Please confirm the selected values.</p>');
    event.preventDefault();
}

$j("form#proposal").submit(function(event) {
    var val1 = $j("#val1 option:selected").text();
    var val2 = $j("#val2").val();
    if (val1 && val2 && !$j(this).hasClass('values-confirmed')) {
        valuesCheck(event);
    } else {
        return true; // processing stops here after the first click.
    }
});

通过在Firebug中设置断点，我可以看到它一切正常，除了点击“确认值并提交提案”后，当它通过提交函数中的“返回true”行时，没有任何反应。如果我再次触发提交事件，表单将实际提交。

我认为问题与“event.preventDefault（）”有关，但没有这个问题，模式对话框会消失，表单会在确认之前提交。

我还尝试从$form.submit()处理程序中再次调用valuesCheck方法，但无济于事。

如何点击模态对话框中的“确认值并提交建议”按钮实际提交表单？

Answer 1

结帐this jsfiddle。我将功能简化为最基本的功能，因此您需要将其重新用于实际代码，但它可以正常工作。

对于后人，这是代码：

# HTML

<form id="proposal" action="http://google.com" method="get" target="_blank">
    <input name="q">
    <button type="submit">Search</button>
</form>
<div id="proposal-form-errors"></div>

# jQuery

valuesCheck = function(event) {
    $("#proposal-form-errors")
        .dialog({
            modal: true,
            width: 600,
            title: 'Values Confirmation',
            buttons: {
                "Confirm values and submit proposal": function () {
                    $form = $('form#proposal');
                    $form.addClass('values-confirmed');
                    $(this).dialog("destroy");
                    $form.submit();
                },
                "Continue editing": function () {
                    $(this).dialog("destroy");
                }
            }
        })
        .html('<p>Please confirm the selected values.</p>');
}

$("form#proposal").submit(function(event) {
    if (!$(this).hasClass('values-confirmed')) {
        event.preventDefault();
        valuesCheck();
    }
});

Answer 2

if (val1 && val2 && !$j(this).hasClass('values-confirmed')) {
        valuesCheck(event);
    } else {
        return true; // processing stops here after the first click.
    }

当val1或val2中的任何一个为空时，此块将提交表单，我认为这不是预期的。

以下是您的代码的略微修改版本，似乎可以正常工作

$j = jQuery;
var valuesCheck = function(event) {
    $j("#proposal-form-errors")
        .dialog({
            modal: true,
            width: 600,
            title: 'Values Confirmation',
            buttons: {
                "Confirm values and submit proposal": function () {
                    $form = $j('form#proposal');
                    $form.addClass('values-confirmed');
                    $j(this).dialog("destroy");
                    $form.trigger('submit',['pass']);
                },
                "Continue editing": function () {
                    $j(this).dialog("destroy");
                }
            }
        }).html('<p>Please confirm the selected values.</p>');
    event.preventDefault();
}

$j("form#proposal").submit(function(event,pass) {
    if(pass)
       return true;
    var val1 = $j("#val1 option:selected").text();
    var val2 = $j("#val2").val();

    if (val1 && val2) {
        valuesCheck(event);
    } else{
      alert('Please fill all values');
      event.preventDefault();  
    }
});

检查小提琴，单击该按钮后，表单将提交，页面将刷新。

Working Fiddle

我在触发submit时使用$.trigger传递自定义数据。

如何在拦截模式对话框后继续提交事件？

2 个答案: