Question

我有一个表单，当我try it out（当然地址正确）时效果很好。

当我在我的网站中使用它时，在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（点击咨询时）。

Answer 1

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

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

这使您正在使用的第二种表单无效。这就是为什么它没有做任何事情。除此之外，代码是有效的。

Answer 2

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

Answer 3

你在＃buy_block表格中有联系表格，这是无效的。尝试移动<div id="inline1">

之外的整个<form id="buy_block

Answer 4

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

表单在fancybox中不起作用

4 个答案: