Question

I’ve searched and can find things that almost seem like they would work but I can’t seem to find a definitive answer so here goes…

Using this code I have a jQueryUI modal window showing…

<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 (and some PHP I will add after this works), or reload the whole page?

Thanks!
Chris

Answer 1

I solved this by loading an iFrame inside my modal window:

 $(document).ready(function() {
        $("#modalIframeId").attr("src","http://site.com/wordpress/wp-content/themes/theme/registration.php");
       $("#divId").dialog({
               autoOpen: true,
               modal: true,
               closeOnEscape: true, 
               draggable: false,
               resizable: false,
               dialogClass: 'no-close',
               height: 500,
               width: 500,
               title: 'Sign Up'
           });
    });
      </script>

    <div id="divId" title="Dialog Title">
        <iframe id="modalIframeId" width="100%" height="100%"
        marginWidth="0" marginHeight="0" frameBorder="0" scrolling="none"
        title="Dialog Title">Your browser does not suppr</iframe>
    </div>

and calling registration.php into the iframe, which is my form as needed.

Thanks!