CODEWITHSUNDEEP
javascriptjqueryformsfancyboxprestashop
Trufa
Trufa

Reputation: 40717

Form doesn't work inside fancybox

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

Upvotes: 1

Views: 2668

Answers (4)

ShadowScripter
ShadowScripter

Reputation: 7369

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.

Upvotes: 3

saad arshad
saad arshad

Reputation: 259

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

Upvotes: 0

scottlimmer
scottlimmer

Reputation: 2278

You've got the contact form inside form#buy_block which is invalid. Try moving the whole <div id="inline1"> outside of the <form id="buy_block

Upvotes: 1

Pranav 웃
Pranav 웃

Reputation: 8477

On the live site, you seem to be missing the <form> element in the #fancybox-content.

Upvotes: 1

Related Questions