Question

我正在努力实现的目标看起来相当简单但我对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?"; }
?>

Answer 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不适用于此版本

Answer 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会帮助你更多！

Answer 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
  });

Answer 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

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

4 个答案: