Как отправить данные формы в модальное окно fancybox

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 Page (минус других стандартных HTML элементов)

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

Answer 1

ОК, вот еще один способ, метод 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

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

вы можете использовать

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

вопрос является версия JQuery для 'вар' работает данных формы только с 1.10, и FancyBox dosen't работы с этой версией

Answer 4

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