我有一个基本的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，因为我还没有真正提交表单。我如何将数据发送到我的fanybox，用户可以查看它，然后提交表单或返回编辑?谢谢你的帮助。
我要做的是创建另一个.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
当然，DEMO在http://www.picssel.com/playground/jquery/postPreview_05Jun13.html.
指出:
-
.on()需要jQuery v1.7+
您可以使用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是不同的，所以只需替换…