양식 데이터를 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 페이지 (마이너스 다른 표준 HTML 요소) 당신의 방법에

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

Answer 1

좋아요, 여기 다른 방법이 있습니다. iframe 메소드가 약간 오래된 것 같습니다. 아약스를 사용할 수 있습니다. 이 같은 :

먼저 (예 : 마지막 요소)를 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에 따라, 그 후 우리는 링크의 클릭에 아약스를 통해 데이터를 전송하고, 수 다시 스크립트에서 답 :

<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

에 작업 예제를 볼 수있는 데이터는 아무데도 안됩니다! 아약스를 통해 데이터를 게시해야하므로 조금 조정해야합니다.

다른 페이지에서 데이터를 가질 수있다 이런 식으로

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

당신은 문제가 'var에 formdata'에만 1.10 작동에 대한 버전 JQuery와, 그리고

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