Getting form to work with jQuery Mobile popups

Question

So I have a project I'm working on where there is a form that takes up my entire data-role="content" section on my page. I have an input inside the content section. I also have a jQuery Mobile popup with an input on it inside my content section. I am attempting to use one form submit to gather the data from the input in the content section and the input from inside the popup.

The raw HTML looks correct until the DOM loads, then I notice jQuery Mobile moves the popup outside of the content section. This makes it so when I submit the form, the input inside of my popup is not sent along with the post request. It only sends the input data from the first input in my content section.

I have seen a few possible fixes however, they do not seem to work with the jQuery Mobile panel I have on my example.

Has anyone run into this situation before? Is there a work around?

Here is my code and a somewhat working example:

JSfiddle (Could not figure out how to post data on JSfiddle)

<div data-role="page" id="page1">

<div data-role="panel" id="mypanel" data-display="reveal" data-position="right">
    <form action="index.php" method="get" data-ajax='false'>
        <label for="filter1">filter1:</label>
        <input type="text" name="filter1"/> 
        <input type="submit" value="Search">
    </form>
</div><!-- end panel -->    

<div data-role="header">
  <h1>Sample Title</h1>
  <a href="#mypanel" id="#togglePanel" data-role="button" data-inline="true" class="ui-btn-right">Filter Results</a>
</div><!-- end header -->

<div data-role="content">

<div id='submitResult'></div> <!-- results will show here but only captures the data from val1 -->

<form id='test'>

    <label for="val1">Value 1:</label>
    <input type="text" name="val1"/>


    <a href="#popup" data-rel="popup" data-role="button" data-inline="true">Show Popup</a>

    <div data-role='popup' id='popup' data-history='false'>         
        <label for="val2">Value 2:</label>
        <input type="text" name="val2"/>
        <input id='sendNow' type='submit' value='Submit'/>

        <div id='submitResult'></div> <!-- results will not show here at all -->
    </div><!-- end popup -->

</form>

</div><!-- end content -->

<div data-role="footer">

</div><!-- end footer -->
</div><!-- end page -->

Answer 1

Figured it out for anyone that might come across this issue. So when I serialize my data I just needed to serialize the individual inputs inside the popup instead to trying to serialize the whole form. This is because no matter what I try the framework seems to strip any <form> tags I put inside my popup.

Like So:

$.post('processVal1andVal2.php', $('#test, input[name='val2']').serialize(), function(data) {