Question

I have a form that works just fine when I try it out (with the correct address of course).

When I use that for in my site, inside a fancybox it doesn’t work. Nothing happens (no error in the console either).

The relevant code is:

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

The JS:

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

I have also tried:

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

I have included the form plugin like this:

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

With no success, the end goal is to send form by AJAX, this is a simplified example to debug.

What I don’t understand either is that even when I remove all js it wont direct me to the action page.

You can see a live example here (When you click consulta).

Answer 1

The problem is shown on your live site. Upon examining the source code, you can see that you’re adding a form within another 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>

Which invalidates the second form you’re working with. That is why it’s not doing anything. Other than that, the code is valid.