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 p

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

  
This is the preview of the form


  
Field 01 : 
  
Field 02 : 
  
Field 03 : 
  submit
  back to edit

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

Preview

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+