在fancybox中预览php / jquery表单，然后提交或返回表单 [英] previewing php/jquery form in fancybox, then submit or return to form

问题描述

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

 < form action =loggedin.phpenctype =multipart / form-data id =message_formmethod =post> 
< h4>您想要传送讯息给谁？< / h4> 
< input type =textsize =35id =recipientname =recipientvalue =Enter Name> 
< h4>选择背景：< / h4> 
< input type =radiovalue =plainclass =stationery_radioname =stationery_radiochecked /> 
< label for =plain>普通< / label> 
 ..... 
  

这是我想要的信息：

 < a class =fancyboxhref =＃preview_message>点击此处预览您的表单< / a> 
< div id =preview_messagestyle =display：none;> 
< h2>收件人：<？php echo（$ message_form ['recipient']）？>< / h2> 
 ..... 
  

但我无法使用POST，因为我避难所目前还没有提交表格。我怎样才能将数据发送到我的fancybox，用户可以查看它，并提交表单或返回编辑？

解决方案

我会做的是创建另一个.php文件（例如 preview .php ）你可以在哪里（预）通过ajax提交表单。这个文件基本上是 echo POST 您的表单字段的值，如 $ _ POST ['recipient '] 等。

此外，在同一个文件（preview.php）中，您可能有一些链接，要么提交实际的表单，要么关闭fancybox。

下面是一个preview.php文件的例子

 <？php 
函数check_input（$ data）{
 //在这里清理您的输入
} 
 $ field_01 = check_input（$ _ POST ['field_01 ]）; 
 $ field_02 = check_input（$ _ POST ['field_02']）; 
 $ field_03 = check_input（$ _ POST ['field_03']）; 
 // ...等
？> 
< div style =width：340px;> 
< h3>这是< / h3>< br /> 
< p>字段01：<？php echo $ field_01;？>< / p> 
< p>栏位02：<？php echo $ field_02;？>< / p> 
< p>栏位03：<？php echo $ field_03;？>< / p> 
< a class =submithref =javascript：;> submit< / a> 
< a class =closeFBhref =javascript：;>返回编辑< / a> 
< / div> 
  

notice style =width：340px; 因此fancybox会知道要显示多大的文本框（ height 会是 auto ）

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

 < a class =previewdata-fancybox-type =ajaxhref =preview.php>预览< / a> 
  

notice data-fancybox-type = ajax属性，它告诉fancybox内容的类型。

然后脚本通过ajax提交（预览）表单：

  jQuery（document）.ready（function（$） {
 $（'。preview'）。on（click，function（e）{
 e.preventDefault（）; 
 $ .ajax（{
 type： POST，
 cache：false，
 url：this.href，//我们的预览文件（preview.php）
 data：$（＃message_form）。serializeArray（） /表单中的所有字段（使用表单的ID）
 success：function（data）{
 //在fancybox中显示返回的数据
 $ .fancybox（data，{
 modal：true，//可选（不关闭按钮等，参见文档）
 afterShow：function（）{
 //在点击preview.php中的submit和close按钮
 $（。submit，.closeFB）on（click，fun ction（event）{
 if（$（event.target）.is（。submit））{
 $（＃message_form）。submit（）; //提交实际的表单
} 
 $ .fancybox.close（）; //在任何情况下关闭fancybox 
}）; //点击
} // afterShow 
}）; // fancybox 
} // success 
}）; // ajax 
}）; //点击
}）; //准备好
  

当然，DEMO位于 http://www.picssel.com/playground/jquery/postPreview_05Jun13.html 。

NOTES ：

• 这是fancybox v2.1.4 +


• .on（）需要jQuery v1.7 +

I've got a basic html/php form, with jquery validation. I want the user to be able to click a link that says "preview", have fancybox load up, and then I'll present a preview of the data, which means combining elements. For instance, the user can choose the background of the iframe. Here is the basics of my form -

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

And this is the info I want in my 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>
    .....

But I can't use the POST, as I haven't really submitted the form yet. How can I sent the data to my fancybox where the user can look at it, and either submit the form or return to edit? Thanks for any help.

解决方案

What I would do is to create another .php file (e.g. preview.php) where you can (pre)submit the form via ajax. This file would basically echo the POST values of your form fields like $_POST['recipient'], etc.

Additionally, within the same file (preview.php) you may have some links to either submit the actual form or close fancybox.

Here is an example of the preview.php file

<?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;" so fancybox will know what size of box to display (height would be auto)

Then in your main page, add the preview button

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

notice the data-fancybox-type="ajax" attribute, which tells fancybox the type of content.

Then the script to submit (preview) the form via 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

Of course, the DEMO at http://www.picssel.com/playground/jquery/postPreview_05Jun13.html.

NOTES:

• this is for fancybox v2.1.4+
• .on() requires jQuery v1.7+

这篇关于在fancybox中预览php / jquery表单，然后提交或返回表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！