jQuery modal dialog box isn't submitting my form

Question

I am using a jQuery Modal Dialog box to ask the user if they wish to submit the form or not.

However after the user clicks Dialog\'s Submit button, the form is not

Answer 1

The solution is simply... your button name. Why you ask? I shall show you!

Take this jsfiddle and notice I only made a few changes. The javascript has not changed, just the HTML

HTML

    
    

Please confirm that you want to submit
​

I've made two changes:

1. I changed the action to be a javascript call for jsfiddle compatibility
2. I modified your button name to something other than submit

I had to do #2 because calling $('#myform').submit was referencing the button, not the submit method, and jQuery got all kinds of confused. By renaming your button, the $('#myform').submit remains the expected jQuery submit function and everybody is happy.

I stumbled upon this through going through several iterations, which I've kept below for posterity.

Good luck!

=======ORIGINAL POST BELOW========

If all you want to do is "solve this", you can refactor as follows:

HTML

    
    

Please confirm that you want to submit
​

JavaScript

$(document).ready(function(){
    var submitForm = $('#myform');
    submit = false;

    $("#confirm").dialog({
        resizable: false,
        height: 140,
        modal: true,
        autoOpen: false,
        buttons: {
            'Submit': function() {
                $(this).dialog('close');
                submit = true;
                submitForm.submit();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    });
    $("#confirm").parent().appendTo($("#myform")); 

    $("#btnSubmit").click(function() {
        $("#confirm").dialog('open');
    });

    submitForm.submit(function() {
        if (submit) {
            return true;
        }
    });
});​

Oddly, the below works as well:

HTML

    
    

Please confirm that you want to submit
​

JavaScript

$(document).ready(function(){
    var submitForm = $('#myform');
    submit = false;

    $("#confirm").dialog({
        resizable: false,
        height: 140,
        modal: true,
        autoOpen: false,
        buttons: {
            'Submit': function() {
                $(this).dialog('close');
                submit = true;
                $('#myform').submit();
                //submitForm.submit();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    });
    $("#confirm").parent().appendTo($("#myform")); 
    $("#btnSubmit").click(function() { $('#myform').submit(); });

    submitForm.submit(function() {
        if (submit) {
            return true;
        } else {
            $("#confirm").dialog('open');
            return false;
        }
    });
});​

The only thing I changed here was removed the submit button and 100% submit via jQuery.