0

我有一个表单，我希望用户在尝试提交时确认其中一个值，并且我希望在 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处理程序中再次调用该方法，但无济于事。

如何使模式对话框中的“确认值并提交提案”按钮在单击时实际提交表单？

4

2 回答 2

2

看看这个 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();
    }
});​
于 2012-06-01T19:16:44.057 回答
0 
if (val1 && val2 && !$j(this).hasClass('values-confirmed')) {
        valuesCheck(event);
    } else {
        return true; // processing stops here after the first click.
    }

val1当任何or为空时，此块将提交表单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();  
    }
});​

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

工作小提琴

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

于 2012-06-01T19:15:33.890 回答