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?