Javascript 表单在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>

我也尝试过：

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

我已经包括了如下的表单插件：

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

如果没有成功，最终目标是通过AJAX发送表单，这是一个需要调试的简化示例

我也不明白的是，即使我删除所有js，它也不会将我指向操作页面

---

当您单击consulta时，可以看到一个实例。

在上，您似乎缺少fancybox内容中的元素。

在上，您似乎缺少fancybox内容中的元素。

您在formbuy_块中有一个无效的联系人表单。尝试将整个移动到外部，您在formbuy_块中获得了无效的联系人表单。尝试将整个问题转移到之外，问题会显示在您的实时站点上。检查源代码后，您可以看到您正在另一个表单中添加一个表单

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

---

这将使您正在使用的第二个表单无效。这就是为什么它什么也没做。除此之外，代码是有效的。

问题显示在您的实时站点上。检查源代码后，您可以看到您正在另一个表单中添加一个表单

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

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

---

这将使您正在使用的第二个表单无效。这就是为什么它什么也没做。除此之外，代码是有效的。

这是因为缺少实时示例。@PranavKapoor我已更新，但仍然没有任何内容。。。很抱歉，我还是看不见。请尝试$'fancybox-wrap'。单击按钮后在控制台上查找“表单”。@PranavKapoor该表单似乎位于另一个表单中，这似乎是问题所在，我将尽快检查。这是因为缺少实时示例。@PranavKapoor我已更新，但仍然没有任何内容。。。很抱歉，我还是看不见。请尝试$'fancybox-wrap'。单击按钮后在控制台上查找'form'。PranavKapoor该表单似乎在另一个表单中，这似乎是问题所在，我会尽快回来检查。我刚刚检查了元素，你说得对，但当我看到代码时，我实际上看到了它，fancybox似乎正在删除表单标记？？？？？请看这里，我100%确定表单标签在原始代码中。@Trufa请查看我的答案。这实际上是一个正确的答案，所以+1，谢谢，我接受了@ShadowScripter的答案，因为他指出这是表单中的一个表单，这让我找到了问题，谢谢！！！我刚刚检查了元素，你是对的，但当我看到代码时，我实际上看到了它，fancybox似乎正在删除表单标记？？？？？请看这里，我100%确定表单标签在原始代码中。@Trufa请查看我的答案。这实际上是一个正确的答案，所以+1，谢谢，我接受了@ShadowScripter的答案，因为他指出这是表单中的一个表单，这让我找到了问题，谢谢！！！嗯，这似乎是问题所在，我会尽快报告的@Trufa将来，您可以通过站点或文件在上测试和验证您的源代码。我注意到了这个问题，因为Firefox在查看源代码时将无效标记标记为红色。您应该尝试并熟悉可用的调试工具：嗯，这似乎是问题所在，我会尽快报告的@Trufa将来，您可以通过站点或文件在上测试和验证您的源代码。我注意到了这个问题，因为Firefox在查看源代码时将无效标记标记为红色。您应该尝试并熟悉可用的调试工具：

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