我要做的是创建另一个 .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+