如何将表单数据发送到fancybox模式窗口

Posted 2023-05-09

【中文标题】如何将表单数据发送到fancybox模式窗口

【英文标题】：How to send form data to fancybox modal window

【发布时间】：2013-08-29 08:34:58

【问题描述】：

我要完成的工作似乎相当简单，但我对 php 的执行并没有深入的了解。我有一个带有是或否单选按钮的简单表单。我想在提交表单时启动一个模式窗口并显示所有回答是的问题。我可以使用 iframe 很好地启动模态窗口，因为我计划在模态中包含除了表单提交之外的其他内容，但是我正在使用的非常简单的 php 脚本没有显示在模态中。当我删除 fancybox 脚本并保持表单操作 php 文件相同时工作得很好。

我假设 jquery 和 php 脚本在不同时间触发之间存在冲突，但不知道从哪里开始解决这个问题。下面是我正在使用的代码。任何帮助都会很棒，请记住，我不知道如何编写 php。

您可以在 http://staging.drugrehabtest.com 上查看一个工作示例

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="scripts/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/jquery.fancybox.pack.js?v=2.1.5"></script>

<script type="text/javascript">
    if(!jQuery.browser.mobile)
        jQuery(document).ready(function() 
            $(".fancybox").fancybox(
                'width'  : 920,
                'minHeight' : 230,
                'type'   : 'iframe',
                'padding': 20,
                'href': 'success.php',
            );
        );
    
</script>

<form action="success.php" method="post" name="contact" id="contact">
    <input type="radio" class="checkbox" name="one" value="yes" title="Do you find yourself using drugs even when you don't want to?: Yes" />
    <label class="question">Do you find yourself using drugs even when you don't want to?</label>
    <input type="submit" name="Submit" id="submit" class="fancybox fancybox.iframe" />
</form>   

Success.php 页面（减去其他标准 html 元素）

<?php
    if ($_POST['one']=="yes")  echo "Do you find yourself using drugs even when you don't want to?"; 
?>

【参考方案1】：

你可以使用

$(document).ready(function()
        $("#"+secc+"form").submit(function()
            var formData = new FormData($(this)[0]);
            $.ajax(
                url: '../form/',
                type: 'POST',
                data: formData,
                async: false,
                success: function (data) 
                    //history,go(-1);
                ,
                cache: false,
                contentType: false,
                processData: false
            );

        return false;
        );
    );

问题是 'var formdata' 的 jquery 版本仅适用于 1.10，而fancybox 不适用于此版本

【参考方案2】：

以您的方式，数据不会去任何地方！ 您必须通过 ajax 发布您的数据，您需要稍作调整。

 jQuery(document).ready(function() 
   $(".fancybox").fancybox(
    'width'  : 920,
    'minHeight' : 230,
    'type'   : 'iframe',
    'padding': 20,
    'href': 'success.php',
    'data': $("#contact").serializeArray(),//send all form fields
  );

这样你就可以把你的数据放在其他页面...

也许this post对你有更多帮助！

【讨论】：

不幸的是，这不起作用。我添加了新的“数据”字段，但仍然遇到同样的问题。我查看了您发布的链接，但这一切都超出了我的想象，不知从何开始。问题是当我删除模态窗口时，数据发送得很好并且工作得很好。当我添加数据不再显示的 fancybox 脚本时。

【参考方案3】：

jQuery(document).ready(function() 
   $(".fancybox").fancybox(
    'width'  : 920,
    'minHeight' : 230,
    'type'   : 'iframe',
    'padding': 20,
    'href': 'success.php',
    'data': $("#contact").serializeArray(),//send all form fields
  );

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【参考方案4】：

好的，这里是另一种方式，iframe方式似乎有点老了，你可以在这里使用ajax。像这样：

首先在您的 html 中添加一个链接（例如，最后一个元素）：

<form action="success.php" method="post" name="contact" id="contact">
    <input type="radio" class="checkbox" name="one" value="yes" title="Do you find yourself using drugs even when you don't want to?: Yes" />
    <label class="question">Do you find yourself using drugs even when you don't want to?</label>
    <input type="submit" name="Submit" id="submit" class="fancybox fancybox.iframe" /><!-- this is useless here -->
    <a id="check" data-fancybox-type="ajax" href="success.php" id="check">Result</a>
</form>  

根据this post，我们点击链接后通过ajax发送数据，再次在脚本中得到答案：

<script type="text/javascript">
jQuery(document).ready(function() 
    $('#check').on("click", function (e) 
        e.preventDefault(); // avoids calling success.php from the link
        $.ajax(
            type: "POST",
            cache: false,
            url: this.href, // success.php
            data: $("#contact").serializeArray(), // all form fields
            success: function (data) 
            // on success, post returned data in fancybox
            $.fancybox(data, 
                // fancybox API options
                fitToView: false,
                openEffect: 'none',
                closeEffect: 'none'
            ); // fancybox
             // success
        ); // ajax
    ); // on
); //ready
</script>

另一件事是 .browser 已从 jquery 中删除，而不是您可以使用Modernizr。 Reference

【讨论】：

完美。这很好用，这正是我想要完成的。谢谢！