如何發送表單數據的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的方法似乎有點老了，你可以在這裏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; 
     }); 
    }); 

的問題是對於 '無功FORMDATA' 僅適用於1.10版本的jQuery，並與此版本的fancybox這麼想的工作

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