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

我有一個基本的HTML/PHP表單，並帶有jQuery驗證。我希望用戶能夠點擊「預覽」鏈接，加載fancybox，然後我將展示數據預覽，這意味着組合元素。例如，用戶可以選擇iframe的背景。這裏是我的形式的基礎 -在fancybox中預覽php/jquery表單，然後提交或返回表單

<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，用戶可以查看它，並提交表單或返回編輯？謝謝你的幫助。

來源

2013-06-06 Kathy L

我會做的是創建另一個.php文件（例如preview.php），你可以（預）通過Ajax提交表單。該文件將基本上echo你的表單字段，如$_POST['recipient']等

的POST值。此外，相同的文件（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+

來源

2013-06-06 07:27:00 JFK

工作就像一個魅力 - 太感謝你了！我朝着錯誤的方向前進，你救了我幾個小時的工作！ –

一個問題....當我選擇「返回編輯」我的形式消滅了，當我真的想保持什麼形式了。另外，提交併不實際提交表單 - 它只是將我帶回原始表單！ –

@KathyLyons：在我的演示，當你按下「退回修改」的形式保留，你可以改變和重新預覽OEVER一遍又一遍......並提交它實際上提交表單編輯的值。我不知道你在做什麼不同。 – JFK

您可以使用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，所以我不知道，但我只是使用通用的'隱藏div'節目。我認爲fancybox有其自己的API是不同的，所以只是替代...

來源

2013-06-06 02:12:38 KyleK

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

回答

相關問題