jQueryUI Dialog Box with Form

[IntegrityWebDev]

I'm still pretty much a JS noob and especially at jQuery, but I did manage to get a jQueryUI Dialog box working with this code:

<script> 
jQuery(function() {
$( "#dialog" ).dialog({ closeOnEscape: true, modal: true, draggable: false, resizable: false, width: 500, height: 500, close: function(event, ui) { location.href = 'http://www.page.com' } });
});
</script> 
<div id="dialog" title="WELCOME!">
<form id="wp_signup_form" action="" method="post">
<label>Email address</label><br />
<input type="text" name="email" class="text" value="" /> <br />
<input type="submit" id="submitbtn" name="submit" value="SignUp" />
</form>
</div>

But when I click submit on the form the whole page reloads inside the modal window.

How do either get just the modal window to reload with the form content in it, or reload the whole window with info I will be populating via PHP?

Thanks!
Chris

[daveVk]

action=""

needs to be

action="/processFormDataAndGetDialogContent.php"

It may be convenient to use the same url (php) you used to load the dialog with initially.

[IntegrityWebDev]

The page calls a PHP function and the entire modal window is in that function...even if I change that action to another site completely (google) it reloads the current site inside of the modal window. I also have a target = "_top" in there and that doesn't help.

I am not a JS/jQuery person but after doing some reading on forms processing in a jQuery UI modal window I suspect I'm going to have to rewrite what i've done to allow the processing of the form to be done in jQuery.

[IntegrityWebDev]

I solved this by embedding an iframe inside my modal, this gets what I need. Thanks for the help!