Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

jQueryUI Dialog Box with Form



5:53 pm on Jun 14, 2011 (gmt 0)

5+ Year Member

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:

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' } });
<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" />

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?



1:27 pm on Jun 17, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member


needs to be


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


2:09 pm on Jun 17, 2011 (gmt 0)

5+ Year Member

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.


7:23 pm on Jun 17, 2011 (gmt 0)

5+ Year Member

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

Featured Threads

Hot Threads This Week

Hot Threads This Month