在fancybox中预览php / jquery表单，然后提交或返回表单

我有一个基本的html / php表单，有jqueryvalidation。 我希望用户能够点击一个显示“预览”的链接，加载fancybox，然后我将展示数据的预览，这意味着组合元素。 例如，用户可以选择iframe的背景。 以下是我的表格的基础知识 –

 
Who would you like to send a message to?
  
Choose A Background: 
  Plain ..... 

这是我想要在我的fancybox中的信息：

  Click Here To Preview Your Form 
 
To: 
 ..... 

但是我不能使用POST，因为我还没有真正提交表单。 如何将数据发送到用户可以查看的fancybox，并提交表单或返回编辑？ 谢谢你的帮助。

Answer 1

我要做的是创建另一个.php文件（例如https://stackoverflow.com/questions/16951784/previewing-php-jquery-form-in-fancybox-then-submit-or-return-to-form/preview.php ），你可以通过ajax（pre）提交表单。 这个文件基本上会echo显你的表单字段的POST值，如$_POST['recipient']等。

此外，在同一个文件（https://stackoverflow.com/questions/16951784/previewing-php-jquery-form-in-fancybox-then-submit-or-return-to-form/preview.php）中，您可能有一些链接要么提交实际表单，要么关闭fancybox。

以下是https://stackoverflow.com/questions/16951784/previewing-php-jquery-form-in-fancybox-then-submit-or-return-to-form/preview.php文件的示例

  
 
This is the preview of the form

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

notice style="width: 340px;" 所以fancybox会知道要显示的盒子大小（ height为auto ）

然后在主页面中添加预览按钮

 Preview 

注意 data-fancybox-type="ajax"属性，它告诉fancybox内容的type 。

然后脚本通过ajax提交（预览）表单：

 jQuery(document).ready(function ($) { $('.preview').on("click", function (e) { e.preventDefault(); $.ajax({ type: "POST", cache: false, url: this.href, // our preview file (https://stackoverflow.com/questions/16951784/previewing-php-jquery-form-in-fancybox-then-submit-or-return-to-form/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 https://stackoverflow.com/questions/16951784/previewing-php-jquery-form-in-fancybox-then-submit-or-return-to-form/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 

当然，DEMO在http://www.picssel.com/playground/jquery/postPreview_05Jun13.html 。

注意 ：

• 这是为fancybox v2.1.4 +
• .on()需要jQuery .on() +

Answer 2

您可以使用Jquery来获取值，并将它们放入精美的框中……

有点像这样…不完全，但你明白了……

  $('#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(); 

}）;

fancybox show（）很可能是错误的，从未使用过fancybox，所以我不知道，但我只是使用了一个通用的“隐藏div”节目。 我假设fancybox有自己的API不同，所以只需替换…