I have a form where users will need to select multiple items from 3 very long lists that will be dynamically generated. My solution was to put the 3 lists in separate popups with filterable listviews and checkboxes. It's working visually and the interaction is fine, BUT the values of the checkboxes inside the popups seems to be lost on submit since I'm not getting anything back from $_POST for the 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 INTO 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'] as $volID){
$sql = "INSERT INTO Round_User (
UserID,
RndID
) VALUES (
'{$volID}',
'{$genRnd}'
)";
if (!mysql_query($sql, $connection)){
$message .= "Inserting RUser for VolID Failed: ";
$message .= mysql_error();
}
}
foreach($_POST['selectJudge'] as $judgeID){
$sql = "INSERT INTO Round_User (
UserID,
RndID
) VALUES (
'{$judgeID}',
'{$genRnd}'
)";
if (!mysql_query($sql, $connection)){
$message .= "Inserting RUser for JudgeID Failed: ";
$message .= mysql_error();
}
}
}
?>
I believe the error is with the popups as everything else in the form returns fine. How can I ensure the selections made in those popups is retained as part of the overall form?
I had a similar reaction trying to do a form with hidden fields to be revealed in a popup. I discovered that jquery automatically moves those input fields to the bottom of the page, and only inserts placeholders within the tags. I am meddling with a few different solutions now and if I come up with any for the both of us I will be sure to share.
**Edit: Here is some more info I found related to the problem: http://forum.jquery.com/topic/jquery-mobile-popup-aspires-outside-of-form
Thusfar things look grim for our predicament. I am beginning to think it might just be easier to use twitter bootstrap popups in this case, or even just building my own.