Question

I have this HTML form with an id and I have binded this id to the submit function. What I want is when a user clicks submit, a popup comes up like a modal box thanking them. And only after they click off the screen or when the modal box closes is when I want the form to submit and refresh the page.

But the way I have it now seems it will refresh no matter what. I am using the fancy popup plugin for the modal box.

<form action="submit-comment.php" method="post" id="form">
<input type="text" name="comment" />
<input type="submit" name="submit" value="Submit" />
</form>

jQuery("#form").submit(function() {
     jQuery.fancybox('<div class="box">Some content</div>', {
           'onClosed' : function() { return true; }
            }     
     });
});

As you can see I am trying to tell it to return true only on close but it isn’t really working.

Any ideas?

Answer 1

Try this:

jQuery("#form").submit(function(e) {
     var self = this;
     e.preventDefault();
     jQuery.fancybox('<div class="box">Some amazing wonderful content</div>', {
           'onClosed' : function() { 
                          self.submit();
                        }
     });
     return false; //is superfluous, but I put it here as a fallback
});

javascript is asynchronous so you cannot delay the return statement.

---

UPDATE

To make it so that the code above works, change the name of you submit button to something else, for example:

<input type="submit" name="submit_me" value="Submit" />