Question

I have a form on which I would like the user to confirm one of the values when they try to submit, and I would like the confirmation to occur in a jQuery UI modal dialog.

The code looks something like this:

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.
    }
});

By setting breakpoints in Firebug, I can see that it all works as I would expect, except that after clicking the “Confirm values and submit proposal”, when it passes the “return true” line in the submit function, nothing happens. If I fire the submit event one more time, the form will actually submit.

I assume that the problem is related to “event.preventDefault()”, but without that, the modal dialog disappears and the form submits before confirmation can take place.

I have also tried calling the $form.submit() method again from within the valuesCheck handler, but to no avail.

How can I make that “Confirm values and submit proposal” button in the modal dialog actually submit the form when it is clicked?

Answer 1

Check out this jsfiddle. I distilled the functionality down to the bare essentials, so you’ll need to work it back into your real code, but it works.

For posterity, here’s the code:

# 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();
    }
});​