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

【问题标题】：previewing php/jquery form in fancybox, then submit or return to form在 fancybox 中预览 php/jquery 表单，然后提交或返回表单
【发布时间】：2013-06-06 00:04:00
【问题描述】：

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

    <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>
     .....

这是我想要在我的幻想箱中的信息：

    <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>
    .....

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

【问题讨论】：

标签： php jquery forms fancybox fancybox-2

【解决方案1】：

我要做的是创建另一个 .php 文件（例如preview.php），您可以在其中（预先）通过 ajax 提交表单。该文件基本上将echo POST 表单字段的值，如$_POST['recipient'] 等。

此外，在同一个文件 (preview.php) 中，您可能有一些链接可以提交实际表单或关闭 fancybox。

这是 preview.php 文件的示例

<?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>

通知 style="width: 340px;" 所以 fancybox 会知道要显示的框的大小（height 将是 auto）

然后在你的主页中，添加预览按钮

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

注意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 (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

当然是http://www.picssel.com/playground/jquery/postPreview_05Jun13.html的DEMO。

注意事项：

这是为 fancybox v2.1.4+ 准备的
.on() 需要 jQuery v1.7+

【讨论】：

工作就像一个魅力 - 非常感谢！当我走错方向时，您为我节省了数小时的工作时间！
还有一个问题......当我选择“返回编辑”时，我的表单被清除了，而我真的想保留表单中的内容。此外，提交实际上并没有提交表单 - 它只是让我回到原来的表单！
@KathyLyons ：在我的演示中，当您按“返回编辑”时，表单会保留已编辑的值，您可以一次又一次地更改和重新预览......并提交它确实提交表格。我想知道你在做什么不同。
我实际上剪切并粘贴了您的代码 - 我在这里有一个示例：link[/link]。我会再试一次。
@KathyL 你的“返回编辑”按钮有“提交”类，所以表单当然提交了

【解决方案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，所以只需替换...

【讨论】：