php - Part of a form is in a jQuery Mobile popup, that part seems to be missing from $_POST - why and how do I fix? -

i have form users need select multiple items 3 long lists dynamically generated. solution put 3 lists in separate popups filterable listviews , checkboxes. it's working visually , interaction fine, values of checkboxes inside popups seems lost on submit since i'm not getting $_post checkbox field names.

form:

<form action="processor.php" method="post"> <label for="title" class="ui-hidden-accessible" >title:</label> <input name="title" id="title" value="" placeholder="title"  type="text">  <label for="desc" class="ui-hidden-accessible" >battle round description:</label> <textarea  name="desc" id="desc" value="" placeholder="description (optional)" ></textarea>  <a href="#addvol_pop" data-rel="popup" data-position-to="window" data-role="button" data-transition="pop" >assign volunteer(s)</a> <a href="#addjudge_pop" data-rel="popup" data-position-to="window" data-role="button" data-transition="pop" >assign judge(s)</a>  <!-- pop ups --> <!-- volunteers --> <div data-role="popup" id="addvol_pop" data-overlay-theme="a" data-theme="a" style="max-width:500px">     <div data-role="header" >         <h1>assign volunteer(s)</h1>     </div>     <div data-role="content" data-theme="a">         <fieldset data-role="controlgroup">         <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="search volunteers..." data-inset="true" data-theme="a">              <?php                 $volset = get_all_users_by_roles(1,2,3,4);                 while($row = mysql_fetch_array($volset)){                     echo "<li style=\"padding:0px;\">";                     echo "<label for=\"selectvol{$row[userid]}\">{$row[userfirstname]} {$row[userlastname]}</label>";                     echo "<input name=\"selectvol[]\" value=\"{$row[userid]}\" id=\"selectvol{$row[userid]}\" type=\"checkbox\">";                     echo "</li>";                 }             ?>          </ul>         </fieldset>          <a href="#" data-role="button" data-inline="true" data-rel="back" >done</a>         <a href="#" data-role="button" data-inline="true" data-rel="back" >clear</a>     </div> </div> <!-- end volunteers -->  <!-- judges --> <div data-role="popup" id="addjudge_pop" data-overlay-theme="a" data-theme="a" style="max-width:500px">     <div data-role="header" >         <h1>assign judge(s)</h1>     </div>     <div data-role="content" data-theme="a">         <fieldset data-role="controlgroup">         <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="search judges..." data-inset="true" data-theme="a">              <?php                 $judgeset = get_all_users_by_roles(5);                 while($row = mysql_fetch_array($judgeset)){                     echo "<li style=\"padding:0px;\">";                     echo "<label for=\"selectjudge{$row[userid]}\">{$row[userfirstname]} {$row[userlastname]}</label>";                     echo "<input name=\"selectjudge[]\" value=\"selectjudge{$row[userid]}\" id=\"selectjudge{$row[userid]}\" type=\"checkbox\">";                     echo "</li>";                 }             ?>          </ul>         </fieldset>          <a href="#" data-role="button" data-inline="true" data-rel="back" >done</a>         <a href="#" data-role="button" data-inline="true" data-rel="back" >clear</a>     </div> </div> <!-- end judges -->  <div class="row">     <div class="large-6 columns">         <button type="submit" name="submitnewround"  data-icon="check">create round</button>     </div>     <div class="large-6 columns">         <a href="rounds.php" type="button"  data-icon="back"  >cancel</a>     </div> </div> 

processor:

<?php if (isset($_post['submitnewround'])) {     $title = trim(mysql_prep($_post['title']));     $desc = trim(mysql_prep($_post['desc']));      $sql = "insert round (                 rndtitle,                 rnddesc             ) values (                 '{$title}',                 '{$desc}'             )";      $message = "results: ";      if (mysql_query($sql, $connection)){         $genrnd = mysql_insert_id();         $message .= "round created sucessfully.";                    } else {         $message .= "creating new round failed: ";         $message .= mysql_error();      }      foreach($_post['selectvol'] $volid){         $sql = "insert round_user (                     userid,                     rndid                 ) values (                     '{$volid}',                     '{$genrnd}'                 )";          if (!mysql_query($sql, $connection)){             $message .= "inserting ruser volid failed: ";             $message .= mysql_error();         }     }      foreach($_post['selectjudge'] $judgeid){         $sql = "insert round_user (                     userid,                     rndid                 ) values (                     '{$judgeid}',                     '{$genrnd}'                 )";          if (!mysql_query($sql, $connection)){             $message .= "inserting ruser judgeid failed: ";             $message .= mysql_error();         }     }  }  ?> 

i believe error popups else in form returns fine. how can ensure selections made in popups retained part of overall form?

i had similar reaction trying form hidden fields revealed in popup. discovered jquery automatically moves input fields bottom of page, , inserts placeholders within tags. meddling few different solutions , if come both of sure share.

**edit: here more info found related problem: http://forum.jquery.com/topic/jquery-mobile-popup-aspires-outside-of-form

thusfar things grim our predicament. beginning think might easier use twitter bootstrap popups in case, or building own.