2 Fancyboxes containing separate form values do not submit (test page) - fancybox

Question

I had asked about this before but after some time I felt I had to be a bit more explicit in the issue being experienced.
SCENARIO:
1 Form, 2 Fancyboxes that contain fields. One Fancybox contains "Field 1" the other "Field 2".
FOR DESIRED RESULT:
go to http://testing.myautoiq.com/fancybox
click "Submit from Main Page"
As you will note values for both field_1 and field_2 are returned in _POST vars.
TO PRODUCE THE ERROR 1:
click "Open FB 1" to see field_1
click "Submit from FB 1"
As you will note ONLY field_2 is returned.
TO PRODUCE THE ERROR 2:
click "Open FB 2", you see field_2
click "Submit from FB 2"
As you will note ONLY field_1 is returned.
Feel free to dig around in the source, nothing in there out of the ordinary. Is this an issue with FB? If so, how could it be corrected? I am going mad over here trying.

Answer 1

First you have to understand how fancybox works with inline content: When you open fancybox, the targeted inline content is "moved" from its position in the DOM into the fancybox (a placeholder is left instead)
...in your case, the fields are "moved" OUT of the form so when you submit it from within fancybox, either field field_1 or field_2 doesn't exist inside the form hence they cannot return any value.
You would need to re-write the logic of your code. What I would do is to bind the links that submit the form within fancybox to an event that closes fancybox (returning the fields to their place inside the form) AND submit the form afterwards, so instead of these :
Submit from FB 1
and
Submit from FB 2
would do this
<a class="submit" href="#nogo" >Submit from FB 1</a>
and
<a class="submit" href="#nogo" >Submit from FB 2</a>
notice that I added class="submit" to handle the event from such selector.
Then, create a flag at the top of your script (explained below)
var subMitted = false;
and bind a click event to the selector .submit :
$(".submit").bind("click", function(){
subMitted = true; // set to true when we click on the selector .submit only
$.fancybox.close();
});
and add the afterClose callback to your fancybox custom script
$(".fancybox").fancybox({
afterClose: function(){
// will submit if we clicked the selector .submit
if(subMitted){
subMitted = false; // re-initialize the flag
$("form[name='testform']").submit();
}
}
});
if subMitted is true, we clicked the .submit selector so we will submit the form after closing fancybox (we don't submit the form IF fancybox was closed using the close button)
This way your form will always return all the values whether it's submitted from inside fancybox or not.