FancyBox inside a html form

Question

I have a normal html form. Inside the form I have several fields. Inside that form I ALSO have a lightbox div. Inside the light box i have a submit button. So it looks something like this:

<form action="path" method="post">
    Name: <input type="text" name="name" /><br/>

    <a href="#fancybox">Link to open fancybox</a>

    <div id="fancybox" style="display: none;">
        <input type="text" name="captcha" />
        <input type="submit" value="Submit" />
    </div>

</form>

When I click on the link to open the fancy box and click the submit button. It doesn't work. The form isn't submitted.

Any ideas whats going on? here is a jsfiddle of the situation JsFiddle

Answer 1

What I would do is :

• add an ID or class to the form (a selector to play with)
• add an ID or class to the submit button

like :

<form id="myForm" action="http://jsfiddle.net" method="post">Name:
    <input type="text" name="name" />
    <br/> <a href="#fancybox" class="fancybox">Link to open fancybox</a>

    <div id="fancybox" style="display: none;">
        <input type="text" name="captcha" placeholder="captcha" />
        <input type="submit" value="Submit" id="mySubmit" />
    </div>
</form>

then bind a click to the selector of the submit button and submit the form after fancybox is closed AND the input fields are back to their position in the form :

$(".fancybox").fancybox({
    afterShow: function () {
        $("#mySubmit").on("click", function () {
            $.fancybox.close();
            setTimeout(function () {
                $("#myForm").submit();
            }, 100); // wait for the inout field to be back inside the form then submit
        });
    }
});

Notice I am using setTimeout() to give some time for the fields to be replaced inside the form element. Also, if you want to validate the captcha inside fancybox, then include the proper scripts inside the same callback.

See JSFIDDLE