在弹出覆盖中显示表单输出答案

【问题标题】：Display form output in popup overlay在弹出覆盖中显示表单输出
【发布时间】：2018-04-06 04:16:26
【问题描述】：

TL;DR - 我想在弹出式覆盖而不是新选项卡中显示表单提交的最终结果。

我有一个在图像上写文本的表单。我点击提交，它会生成带有嵌入文本的图像到一个新页面。

我正在使用这个 jQuery 插件作为我的弹出覆盖：http://dev.vast.com/jquery-popup-overlay/

要触发弹出式覆盖，您必须将一个类分配给您想要触发的位置。所以我将它分配给表单的提交按钮：

<input type="submit" value="Submit" class="my_popup_open">

我创建了一个带有 id 的 div 来显示我希望弹出叠加层的位置：

<div id="my_popup">CONTENT GOES HERE</div>

$(document).ready(function() {

    $(".submit").click(function() {
        var imageFile = $("input#imgInp").val();
        var topLine= $("input#toptextbox").val();
        var bottomLine = $("input#bottomtextbox").val();
        var dataString = 'file-to-upload='+imageFile+'&firstname='+topLine+'&lastname='+bottomLine;
        $.ajax({
          type: "POST",
          url: "action.php",
          data: dataString,
          success: function() {
            // Initialize the plugin
            $('#my_popup').popup(); 
          }
        });
        return false;
     });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.13/jquery.popupoverlay.js"></script>

<form action="">
  First name:<br>
  <input type='file' name="file-to-upload" id="imgInp">
  <input type="text" name="firstname" id="toptextbox"><br> Last name:<br>
  <input type="text" name="lastname" id="bottomtextbox><br><br>
  <input type="submit" value="Submit" class="my_popup_open">
</form>

重述问题：因此，我如何在弹出式叠加层中显示表单的最终结果，而不是打开一个新页面到 action_page.php？

【问题讨论】：

标签： php jquery html

【解决方案1】：

您可以为此使用beforeopen 回调函数。

$(function(){
  $('#my_popup').popup({
    beforeopen: function() {
      var text = 'First name: '+$('[name=firstname]').val()+'<br />';
      text += 'Last name: '+$('[name=lastname]').val();
      this.html(text);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.13/jquery.popupoverlay.js"></script>
<form action="/action_page.php" method="POST">
  First name:<br>
  <input type="text" name="firstname" value="John"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Doe"><br><br>
  <input type="submit" value="Submit" class="my_popup_open">
</form>

<div id="my_popup">asdf</div>

【讨论】：

甜蜜！现在我如何才能在弹出窗口中获得最终输出（带有合并文本的图像）？
“最终输出”和“合并文本的图像”是什么意思？请澄清
我有一个表单，可以在用户选择的图像上写入文本。我点击提交，它会生成所述图像，其中嵌入了文本到一个新页面。我不想打开一个新网页，而是想将最终输出（带有嵌入文本的图像）显示到弹出叠加层。如果我需要澄清更多，请告诉我。谢谢！
该图像是如何创建的？
神奇的 PHP 世界。用户上传他们选择的图片。当他们点击提交时，图像和文本在第二个 PHP 文件中得到处理，该文件使用 PHP 函数 imagettftext 将文本和图像融合在一起。然后我使用imagejpeg将该图片放在一个文件夹中。

【解决方案2】：

非常感谢@LinkinTED 在将最终结果输出到网页时的耐心和 ajax 建议。

解决方案：

我使用webpage's 解决方案一次性传递所有表单数据。

        $.ajax({
            type: "POST",
            url: "action.php",
            data : new FormData($('#myform')[0]),
            processData: false,
            contentType: false,
            dataType: "html",
            success: function(data) {
                // Initialize the plugin
                $('#herewego').html(data);
                $('#my_popup').popup({
                    opacity: 0.1,
                    transition: 'all 0.3s',
                });
                $('#my_popup').popup("show");
            }
        });
        return false;

一旦我能够确保 action.php 文件中的数据不为 NULL，我就能够回显图像 URL 并在弹出叠加层中显示图像。尤里卡！

【讨论】：