在fancybox中預覽php / jquery表單，然后提交或返回表單

Question

我有一個基本的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>
     .....  

這是我想要在我的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>
    .....

但我不能使用POST，因為我還沒有真正提交表單。 如何將數據發送到用戶可以查看的fancybox，並提交表單或返回編輯？ 謝謝你的幫助。

Answer 1

我要做的是創建另一個.php文件（例如preview.php ），您可以通過ajax（pre）提交表單。 這個文件基本上會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>

notice 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

當然，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不同，所以只需替換...