Keeping it inside the modal

[Jeremy]

For my site's newsletter signup, I want the actual signup form inside
Facebox. When the user clicks the submit button, I want the
confirmation (Campaign Monitor's confirmation page) to also show up
inside the modal.

Currently, the signup form comes up inside Facebox fine. But when
submitted, the browser just goes to the confirmation page (not inside
the modal).

Any help on making it work would be greatly appreciated. :)

[JJ Jiles]

For these types of UI's, I've been using iframes.  It's the only method I've found to work correctly.  Use ajax to call subscribe-form.php in the Facebox. Here's some rough code for subscribe-form.php (ugly, but you get the point).


<?PHP
    // Parse the query string and create variables
    parse_str ($_SERVER['QUERY_STRING']);

    // We are viewing within the iFrame and the form has been submitted
    if ( issest($frame) && isset($_POST['email_address'] ) :
?>
            <div class="thankyou">Thanks for subscribing. You're awesome!</div>

<?PHP 
    // We are viewing within the iFrame. The form has not been submitted
    elseif ( isset($frame) && !isset($_POST['email_address'] ) :
?>
      <form action="subscribe-form.php?frame=yes" method="post">
          Email: <input type="text" name="email_address" id="email_address" value="" />
          <input type="submit" value="subscribe" />
      </form>

<?PHP
    // Non-Iframe portion. Simply show the  header and the iFrame tag
    else :
?>
      <div class="header">Subscription Form</div>
      <iframe src="subscribe-form.php?frame=yes" width="400" height="200" border=0 frameborder=0 scrolling="no"></iframe>

<?PHP endif; ?>

[Jeremy]

Thank you kind sir. I will give iframes a shot. :)

[Justin Jiles]

Let me know if you have any problems and I'll help as best I can.

Because facebox actually brings in the form as an element of the
patent page, when you submit, it submits the parent page.

Another way around this would be to use jQuery's post function and use
Ajax to submit the form, buy that will require additional javascript
functions and would probably end up being more code than just using an
iframe. You remove the frame border and scrolling and the user won't
know the difference.

[AmyBSells]

you can try, in the iframe page, setting <base target =_self /> may
work. i think your modal frame has to be within an html page of
itself for this to work

On May 26, 5:02 pm, Justin Jiles <justin.ji...@gmail.com> wrote:
> Let me know if you have any problems and I'll help as best I can.
>
> Because facebox actually brings in the form as an element of the  
> patent page, when you submit, it submits the parent page.
>
> Another way around this would be to use jQuery's post function and use  
> Ajax to submit the form, buy that will require additional javascript  
> functions and would probably end up being more code than just using an  iframe. You remove the frame border and scrolling and the user won't  
> know the difference.
>

> On May 26, 2009, at 3:49 PM, Jeremy <jeremy.b...@gmail.com> wrote:
>
>
>
> > Thank you kind sir.  I will give iframes a shot.  :)
>
> > On May 26, 3:50 pm, JJ Jiles <justin.ji...@gmail.com> wrote:
> >> For these types of UI's, I've been using iframes.  It's the only  
> >> method I've
> >> found to work correctly.  Use ajax to call subscribe-form.php in the
> >> Facebox. Here's some rough code for subscribe-form.php (ugly, but  
> >> you get
> >> the point).
>
> >> <?PHP
> >>     // Parse the query string and create variables
> >>     parse_str ($_SERVER['QUERY_STRING']);
>

> >>     // We are viewing within theiFrameand the form has been  

> >> submitted
> >>     if ( issest($frame) && isset($_POST['email_address'] ) :
> >> ?>
> >>             <div class="thankyou">Thanks for subscribing. You're
> >> awesome!</div>
>
> >> <?PHP

> >>     // We are viewing within theiFrame. The form has not been  

> >> submitted
> >>     elseif ( isset($frame) && !isset($_POST['email_address'] ) :
> >> ?>
> >>       <form action="subscribe-form.php?frame=yes" method="post">
> >>           Email: <input type="text" name="email_address"  
> >> id="email_address"
> >> value="" />
> >>           <input type="submit" value="subscribe" />
> >>       </form>
>
> >> <?PHP

> >>     // Non-Iframeportion. Simply show the  header and theiFrametag

> >>     else :
> >> ?>
> >>       <div class="header">Subscription Form</div>

> >>       <iframesrc="subscribe-form.php?frame=yes" width="400"