Question

I have the following code which is not working. I hope you can help me with this.

basically I have a form that i want to confirm using jQuery Dialog first before submitting it. so when i click on submit i get the dialog but when i press yes to confirm nothing happens!!

    $(function() {

        $('#massform').submit(function(e){
           e.preventDefault();
           $('#dialog-mass-confirm').dialog('open');
        });


        $( "#dialog-mass-confirm" ).dialog({
            autoOpen: false,
            resizable: false,
            draggable: false,
            height:180,
            modal: true,
            buttons: {
                "No": function() {
                    $( this ).dialog( "close" );
                },
                "Yes": function() {
                    $("#massform").submit();
                }
            }
        });
    });

<form id="massform" method="post" action="new.php">
    <input type="text" name="email" size="41">
    <input type="submit" value="Submit">
</form>

Answer 1

It appears that you may have a circular reference because you are rebinding the submit function for the form, and then calling submit from the modal which will fire the same event that opened the modal in the first place. I would suggest the following to avoid this problem:

$(function() {

    $('#submitButton').click(function(e){
       e.preventDefault();
       $('#dialog-mass-confirm').dialog('open');
    });


    $( "#dialog-mass-confirm").dialog({
        autoOpen: false,
        resizable: false,
        draggable: false,
        height:180,
        modal: true,
        buttons: {
            "No": function() {
                $( this ).dialog( "close" );
            },
            "Yes": function() {
                $("#massform").submit();
            }
        }
    });
});

<form id="massform" method="post" action="new.php">
    <input type="text" name="email" size="41">
    <input ID="submitButton" type="button" value="Submit">
</form>