2

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>
3
  • Does the e.preventDefault() get called when you press Yes too?
    – Douglas
    Oct 22, 2012 at 22:10
  • Anything on console? Also, you have a listener onsubmit so you are preventing default behavior, even when you call the event from the popup dialog
    – Alfabravo
    Oct 22, 2012 at 22:10
  • to Douglas, yes it does - :) now i figured it out Oct 22, 2012 at 22:26

2 Answers 2

0

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>
2
  • You are right, but i still need to add the following in order to prevent the form from submitting when i click the submit button. Oct 22, 2012 at 22:23
  • In my example, the button with value of "Submit" is no longer a type of submit, but type of button. So clicking it will not submit the form, only open the modal. Oct 22, 2012 at 23:10
0

You shold look up scopes and event trigering in more detail so you understand the problem you are facing. 1.st you have created an jqery function which is bound to your form submit event.

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

When you use the submit button your event gets fired, and the dialog opens. When you however submit the form with

            "Yes": function() {
            $("#massform").submit();

It fires the bound function pointed out earlier... which prevents the form it self from being submitted. To be precise you just reopen the dialog. but that happens so fast that you don`t notice it.

If you are forced to use the submit action for compatibility reasons... you could use a loc variable to do the dirty job...

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

while you may set the lock in the submit. Have never tried it tht way, but it should work. i usually end up using a variable from the document ready scope.

This is a dirty solution when you cant modify the form. Ugly but it works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.