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

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.

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

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.