窗體不能在fancybox內工作

我有一個表格，當我try it out（當然有正確的地址）時工作得很好。窗體不能在fancybox內工作

當我在我的網站中使用它時，在fancybox內不起作用。沒有任何反應（控制檯中沒有錯誤）。

相關的代碼是：

<a class="fancybox" href="#inline1" id="link_consultar"> 
    Consultar 
</a> 
<div style="display: none"> 
    <div id="inline1"> 
    Producto: {$product-> 
    name|escape:'htmlall':'UTF-8'} 
    <br> 
    <br> 
    <form id="myForm" action="http://danielvi.com/send_mail.php" method="post"> 
     Nombre: 
     <input type="text" name="firstname"> 
     <br> 
     <br> 
     Consulta: 
     <br> 
     <textarea rows="4" cols="50"> 
     </textarea> 
     <br> 
     <br> 
     <input type="submit" value="Enviar Consulta" /> 

    </form> 
    </div> 
</div>

的JS：

$(document).ready(function() { 
    $('#myForm').submit(function(){ 
     alert("submitted"); 
    }); 
});

我也曾嘗試：

$(document).ready(function() { 
    $("#myForm").on("submit", function(event){ 
     alert("submitted"); 
    });   
});

我已經包括表單插件是這樣的：

<script src="http://malsup.github.com/jquery.form.js"></script>

沒有成功，最終目標是通過AJAX發送表單，這是一個簡化的示例來調試。

我不明白的是，即使我刪除了所有的js，它也不會將我引導到操作頁面。

你可以看到一個活的例子here（當你點擊諮詢）。

來源

2012-12-21 Trufa

這是因爲現場示例中缺少'

@PranavKapoor我已經更新，但仍然沒有...對不起。 – Trufa

還是看不到它。點擊按鈕後，在控制檯上試試'$（'＃fancybox-wrap'）。find（'form'）'。 –

該問題顯示在您的現場網站上。考察了源代碼，你可以看到你的另一種形式

<form id="buy_block" action="http://danielvi.com/index.php?controller=cart" method="post"> 
    [...] 
    <form id="myForm" action="http://danielvi.com/send_mail.php" method="post"> 
     [...] 
    </form> 
</form>

您正在使用的第二種形式無效內加入一種形式。這就是爲什麼它沒有做任何事情。除此之外，代碼是有效的。

來源

2012-12-21 10:18:21 ShadowScripter

嗯，這似乎是問題，我會盡快報告！ – Trufa

謝謝，我的代碼在表單外移動並且工作正常！ – Trufa

@Trufa未來，您可以通過網站或文件在[W3C MVS]（http://validator.w3.org/）上測試驗證源代碼。我注意到這個問題，因爲在查看源代碼時，Firefox標記爲無效標記紅色。您應該嘗試熟悉可用的調試工具。 :) – ShadowScripter

在live site上，您似乎錯過了#fancybox-content中的<form>元素。

來源

2012-12-21 10:14:09

我剛剛檢查過這個元素，你說得對，但是當我看到代碼時，我實際上看到了它，fancybox似乎在刪除表單標籤?????見這裏http://i.imgur.com/CV8tV.png我100％確定窗體標籤在原始代碼中。 – Trufa

@Trufa請看我的回答。 – ShadowScripter

這實際上是一個正確的答案，所以+1和謝謝，我指出@ ShadowScripter的答案只是因爲他指出它是一個窗體內的形式，並且導致我找到問題，謝謝！ – Trufa

您已經將表單＃buy_block中的聯繫表單無效。嘗試移動整個<div id="inline1">以外的<form id="buy_block

來源

2012-12-21 10:16:46 scoota269

這就是問題所在，非常感謝！ – Trufa

$("input[type='submit']").click(function(){ 
    $.ajax: { 
     type  : "POST", 
     cache : false, 
     url  : "http://danielvi.com/send_mail.php", 
     success: function(data) { 
      $.fancybox({ 
       'width': 400, 
       'height': 400, 
       'enableEscapeButton' : false, 
       'overlayShow' : true, 
       'overlayOpacity' : 0, 
       'hideOnOverlayClick' : false, 
       'content' : data 
      }); 
     } 
    } 
});

來源

2012-12-21 10:19:34

窗體不能在fancybox內工作

回答

相關問題