jquery - FancyBox inside a html form -

i have normal html form. inside form have several fields. inside form have lightbox div. inside light box have submit button. looks this:

<form action="path" method="post">     name: <input type="text" name="name" /><br/>      <a href="#fancybox">link open fancybox</a>      <div id="fancybox" style="display: none;">         <input type="text" name="captcha" />         <input type="submit" value="submit" />     </div>  </form> 

when click on link open fancy box , click submit button. doesn't work. form isn't submitted.

any ideas whats going on? here jsfiddle of situation jsfiddle

what :

• add id or class form (a selector play with)
• add id or class 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 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 click selector of submit button , submit form after fancybox closed , input fields position in form :

$(".fancybox").fancybox({     aftershow: function () {         $("#mysubmit").on("click", function () {             $.fancybox.close();             settimeout(function () {                 $("#myform").submit();             }, 100); // wait inout field inside form submit         });     } }); 

notice using settimeout() give time fields replaced inside form element. also, if want validate captcha inside fancybox, include proper scripts inside same callback.

see jsfiddle