previewing php/jquery form in fancybox, then submit or return to form

Question

I've got a basic html/php form, with jquery validation. I want the user to be able to click a link that says "preview", have fancybox load up, and then I'll present a preview of the data, which means combining elements. For instance, the user can choose the background of the iframe. Here is the basics of my form -

    <form action="loggedin.php"  enctype="multipart/form-data" id="message_form" method="post">
    <h4>Who would you like to send a message to?</h4>
    <input type="text" size="35" id="recipient" name="recipient" value="Enter Name">
    <h4>Choose A Background: </h4>
    <input type="radio" value="plain" class="stationery_radio" name="stationery_radio" checked />
    <label for="plain">Plain</label>
     .....  

And this is the info I want in my fancybox:

    <a class="fancybox" href="#preview_message">Click Here To Preview Your Form</a>
    <div id="preview_message" style="display:none;">
    <h2>To: <?php echo ($message_form['recipient']) ?></h2>
    .....

But I can't use the POST, as I haven't really submitted the form yet. How can I sent the data to my fancybox where the user can look at it, and either submit the form or return to edit? Thanks for any help.

Arrogant

Answer 1

What I would do is to create another .php file (e.g. preview.php) where you can (pre)submit the form via ajax. This file would basically echo the POST values of your form fields like $_POST['recipient'], etc.

Additionally, within the same file (preview.php) you may have some links to either submit the actual form or close fancybox.

Here is an example of the preview.php file

<?php 
function check_input($data){
   // sanitize your inputs here
}
$field_01 = check_input($_POST['field_01']);
$field_02 = check_input($_POST['field_02']);
$field_03 = check_input($_POST['field_03']);
// ... etc
?>
<div style="width: 340px;">
  <h3>This is the preview of the form</h3><br />
  <p>Field 01 : <?php echo $field_01;?></p>
  <p>Field 02 : <?php echo $field_02;?></p>
  <p>Field 03 : <?php echo $field_03;?></p>
  <a class="submit" href="javascript:;">submit</a>
  <a class="closeFB" href="javascript:;">back to edit</a>
</div>

notice style="width: 340px;" so fancybox will know what size of box to display (height would be auto)

Then in your main page, add the preview button

<a class="preview" data-fancybox-type="ajax" href="preview.php">Preview</a>

notice the data-fancybox-type="ajax" attribute, which tells fancybox the type of content.

Then the script to submit (preview) the form via ajax :

jQuery(document).ready(function ($) {
  $('.preview').on("click", function (e) {
    e.preventDefault(); 
    $.ajax({
      type: "POST",
      cache: false,
      url: this.href, // our preview file (preview.php)
      data: $("#message_form").serializeArray(), // all the fields in your form (use the form's ID)
      success: function (data) {
        // show in fancybox the returned data
        $.fancybox(data,{
          modal : true, // optional (no close button, etc. see docs.)
          afterShow: function(){
            // bind click to "submit" and "close" buttons inside preview.php
            $(".submit, .closeFB").on("click", function(event){
              if( $(event.target).is(".submit") ){
                $("#message_form").submit(); // submit the actual form
              }
              $.fancybox.close(); //close fancybox in any case
            }); // on click
          } // afterShow
        }); // fancybox
      } // success
    }); // ajax
  }); // on click
}); // ready

Of course, the DEMO at http://www.picssel.com/playground/jquery/postPreview_05Jun13.html.

NOTES:

• this is for fancybox v2.1.4+
• .on() requires jQuery v1.7+

Drypoint

Worked like a charm - thank you so much! You saved me hours of work as I was headed in the wrong direction! – Arrogant

One more question.... when I select "Back to Edit" my form is wiped out, when I really want to keep what's in the form already. Also, submit doesn't actually submit the form - it just takes me back to my original form! – Arrogant

@KathyLyons : in my demo, when you press "back to edit" the form retains the edited values that you can change and re-preview oever and over again... and submit it does actually submit the form. I wonder what you are doing differently. – Drypoint

I actually cut and pasted your code - I have a sample here: link[/link]. I'll retry everything again. – Arrogant

@KathyL your "back to edit" button has class "submit" so, of course the form is submitted – Drypoint

Changed my butons to exactly what you have above: <a class="submit btn login-submit" href="">Submit</a> <a class="closeFB btn" href="">Back to Edit</a> – Arrogant

why you don't try validating your document validator.w3.org/check?uri=https://untilnexttime.org/… and fixing the existing errors so you can narrow down the issue? .... the <html> opening tag is misplaced for instance. – Drypoint

Good idea. Just did that. Behavior is still the same, no matter what I choose. "Back to edit" wipes my form and returns me to the blank form, and "Submit" does the same thing, and does not submit the data to the db. Frustrating. – Arrogant

More data... In my sendmessage.class.php, I check to see if the POST is empty - it is. In Firebug I see the POST values and they are populated with the correct values. – Arrogant

Answer 2

You can use Jquery, to get the values, and put them into the fancy box...

A little like this...not quite, but you get the idea...

 $('#preview_button').click(function(){

var msg = $('#recipient').val();
var bg = $('input:radio[name=stationary_radio]:checked').val();

$('h2#recipient').html(msg);
//and whatever you wanna do with the value of the bg
//probably apply some CSS on the fly to change the preview background?
$('#fancybox').show();

});

The fancybox show() is likely wrong, never used fancybox, so I dont know, but Im just using a generic, 'hidden div' show. I assume fancybox has its own API that is different, so just substitute...

Scorekeeper