How to send form data to fancybox modal window

Question

What I'm trying to accomplish seems rather simple yet I do not have a strong understanding of PHP to execute it. I have a simple form with yes or no radio buttons. I'm wanting to launch a modal window upon form submission and display all of the questions that were answered yes. I'm able to launch the modal window just fine using an iframe, since I plan on having other content besides the form submission inside the modal, yet the VERY simple php script I'm using is not showing up inside the modal. Works just fine when I remove the fancybox script and keep the form action php file the same.

I'm assuming there's a conflict between the jquery and php script firing at different times but have no idea where to begin on how to fix this. Below is the code I am working with. Any help would be great and please keep in mind that I do not know how to code php.

You can see a working example on 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 Page (minus other standard html elements)

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

Answer 1

you can use

$(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;
        });
    });

the issue is the version jquery for the 'var formdata' only works with 1.10, and fancybox dosen't work with this version

Answer 2

In your way , the data isn't going anywhere! You have to post your data through ajax, you need a little adjustment.

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

In this way you can have your data in other page...

Maybe this post helps you more!

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

ok, here is another way, the iframe method seems a little bit old, you can use ajax here. something like this :

First add a link in your html (in example, the last element) :

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

according to this post, after that we send the data through ajax on click of link, and get the answer in the script again :

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

and another thing is that .browser is removed from jquery instead of that you can use Modernizr. Reference