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 submitting.

If I then click the forms submit button again, it submits.

I am guessing this is a scope issue, I have seen some other posts about it but as yet have spent many hours with no luck. Any ideas on how to solve this?

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")); 

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

HTML

<form id="myform" action="#" method="post">
    <input type="text" name="check_me" />
    <input type="submit" name="submit" value="Go!" />
</form>
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>

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

<form id="myform" action="javascript:alert('Success!')" method="post">
    <input type="text" name="check_me" />
    <input type="submit" name="btnSubmit" value="Go!" />
</form>
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​

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

<form id="myform" action="#" method="post">
    <input type="text" name="check_me" />
    <input type="button" id="btnSubmit" value="Go!" />
</form>
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​

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

<form id="myform" action="javascript:alert('success!');" method="post">
    <input type="text" name="check_me" />
    <input type="button" id="btnSubmit" value="Go!" />
</form>
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​

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.

Answer 2

Change the name attribute of your submit button from 'submit' to 'btnSubmit'

<input type="submit" name="btnSubmit" value="Go!" />

Replace the '#' in the form action attribute to blank or any other valid url.

Answer 3

You can try on submit event form have different type of events.

onsubmit="return confirm('Please confirm that you want to submit')"

see this EDIT , now you can change create one function with Modal Dialog return true or false.