Jquery trap form submit()

Question

I'm currently using jquery to trap the submission of a form and show users a dialog for confirmation. If user clicks yes, then form should submit. If user clicks no, then close the dialog.

This all works well but for one issue: when the user clicks yes, this then triggers the same code again, and the dialog is re-opened.

$("#myform").submit(function (event) {
    if (something) {
        var $dialog = $('<div></div>').dialog({
            buttons: {
                "OK": function () {
                    $dialog.dialog('close');
                    $("#myform").submit();
                    return;
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        $dialog.dialog('open');
        event.preventDefault();
        return false;
    } else {
        $("#myform").submit();
    }
});

I understand why this is happening, just not sure on the best way to get around it. I realise that I could show the modal on button click, instead of form submit, but this doesnt get around the problem of user hitting enter button on keyboard to submit the form.

Answer 1

Because when you submit the form, the submit event triggers again and so the event handler. You need to unbind the submit event handler when user says OK. Try this

$("#myform").submit(function (event) {
    if (something) {
        var $dialog = $('<div></div>').dialog({
            buttons: {
                "OK": function () {
                    $dialog.dialog('close');
                    //Check this line - unbinding the submit event handler
                    $("#myform").unbind('submit').submit();
                    return;
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        $dialog.dialog('open');
        event.preventDefault();
        return false;
    } else {
        $("#myform").submit();
    }
});

Answer 2

You should return false when OK:

$("#myform").submit(function (event) {
    if (something) {
        var $dialog = $('<div></div>').dialog({
            buttons: {
                "OK": function () {
                    $dialog.dialog('close');
                    $("#myform").submit();
                    return false; // <=== not just return;
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        $dialog.dialog('open');
        event.preventDefault();
        return false;
    } else {
        $("#myform").submit();
    }
});

Or delete the manual submit:

buttons: {
"OK": function () {
    $dialog.dialog('close');
    //$("#myform").submit();  <-- delete it
    return;
},