Question

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中打开一个新页面，而是如何在弹出式叠加层中显示表单的最终结果？

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

Answer 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并在弹出覆盖图中显示图像。尤里卡！

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

2 个答案: