提交按钮不适用于fancybox答案

【问题标题】：Submit button not working with fancybox提交按钮不适用于fancybox
【发布时间】：2017-10-28 15:38:58
【问题描述】：

我在点击一个链接时打开了一个花式框。

这个花哨的盒子有用户名和密码，我想在点击提交按钮时对其进行身份验证。（为了简化我已经将花哨的盒子改为提交按钮）

我写了一个 php 代码，它应该显示 hello，无论是在 fancybox 中还是在 html 页面上（不确定具体在哪里），但它没有被显示。

如何在fancybox或html页面中点击提交按钮时打招呼？

我不想使用ajax调用，但是如果没有ajax调用是不可能的，这种情况下怎么使用ajax呢？

//p.php

<html>
<head>

    <style>
    #hidden-content-b 
    {
    /* Custom styling */
    max-width: 850px;
    border-radius: 40px;

    /* Custom transition - slide from top*/
    transform: translateY(-50px);
    transition: all .33s;
    }

    .fancybox-slide--current #hidden-content-b
    {
    transform: translateY(0);
    }

    </style>

    <link rel="stylesheet" type="text/css" href="fancybox-master/dist/jquery.fancybox.min.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="fancybox-master/dist/jquery.fancybox.min.js"></script>

</head>

<body>

    <h2>fancyBox v3.1 - Inline content</h2>
    <form action = "p.php" method = "post">
        <div class="grid">

            <p>
            <a data-fancybox data-src="#hidden-content-a" 
            href="javascript:;" class="btn">Open demo</a>
            </p>

            <div style="display: none;" id="hidden-content-a">
                <center>
                <h1><b>HTML</b></h1>
                    <input type = "submit" value = "Submit" name = "submit"> 
                </center>
            </div>

            <?php
                if(isset($_POST['submit']))
                echo "hello";
            ?>

        </div>

    </form>
</body>
</html>

【问题讨论】：

标签： php html fancybox fancybox-2 fancybox-3

【解决方案1】：

当您使用 fancyBox 显示某些内容时，它会从其位置移动，因此它不在您的表单内。你只需要改变顺序元素，以便您的内容包含表单，例如：

<div class="grid">

  <p>
    <a data-fancybox data-src="#hidden-content-a" 
       href="javascript:;" class="btn">Open demo</a>
  </p>

  <div style="display: none;" id="hidden-content-a">
    <form action="p.php" method="post">
      <center>
        <h1><b>HTML</b></h1>
        <input type="submit" value="Submit" name="submit"> 
      </center>
    </form>
  </div>

</div>

【讨论】：

在这种情况下，它向我展示了 html 页面上的 php 输出。我应该在代码中进行哪些更改才能在新的fancybox中获得php的输出。
添加自定义提交事件处理程序 -> 使用 ajax 发送数据 -> 显示新的 fancyBox

【解决方案2】：

将表单操作重定向到同一页面并首先检查 if(isset($_POST['submit']))

【讨论】：

我正在重定向到同一页面，甚至尝试检查 isset，但单击按钮时没有任何反应。
你的 div 被隐藏了，所以你看不到提交按钮
点击打开的演示链接后，div 可见，但点击 div 上的提交按钮后没有任何反应。如何在fancybox或html页面上点击提交按钮时打招呼？
尝试在 div 中包含表单
谢谢，我将表单包含在隐藏的 div 中。当我在隐藏的 div 之外使用表单时，它造成了什么不同。同样在这种情况下，它向我展示了 html 页面上的 php 输出。我应该在代码中进行哪些更改才能在新的fancybox中获得php的输出。

【解决方案3】：

我在使用 .Net 时遇到了同样的问题。您可以在不移动 HTML 的情况下将 FancyBox 附加到表单。

FancyBox 文档：

// Container is injected into this element
parentEl: "body",

所以要回答这个问题，请使用：

$('[data-fancybox]').fancybox({
    parentEl: 'form'
});

// Or better yet, use ID's
$('#ID_to_open_link').fancybox({
    parentEl: '#ID_of_form'
});

【讨论】：