I want to be able to save items in a dynamically created HTML Select List. I have two select lists. The first one will be populated via a db pull from a MySQL table. The second will be populated by the user selecting items in the first list and by pressing a button or link, that item will be put into the second list. I have the code that allows the user to add or remove items between the two lists. What I don’t know how to do is get the items that are in the second list into a mysql insert statement. Here is my page code, which includes HTML, PHP, and jQuery. This was partially created using Dreamweaver CS5.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/personEventsPages.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Name : Republic
Description: A two-column, fixed-width design with dark color scheme.
Version : 1.0
Released : 20090910
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Assign Crews</title>
<script src="javascript/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
// this was for a clickable link <a href>
$('#add').click(function() {
return !$('#select1 option:selected').remove().appendTo('#select2');
});
// this one is for a button
$('#addbutton').click(function() {
return !$('#select1 option:selected').remove().appendTo('#select2');
});
// this was for a clickable link <a href>
$('#remove').click(function() {
return !$('#select2 option:selected').remove().appendTo('#select1');
});
// this one is for a button.
$('#removebutton').click(function() {
return !$('#select2 option:selected').remove().appendTo('#select1');
});
});
</script>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="index.php">Church Events</a></h1>
</div>
</div>
<!-- end #header -->
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#" class="MenuBarItemSubmenu">Persons</a>
<ul>
<li><a href="AddAPersonV1.php">Add Persons</a></li>
<li><a href="viewPersonsV2.php">Persons</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Edit</a>
<ul>
<li><a href="viewChurchesV5.php">Churches</a></li>
<li><a href="viewCitiesV2.php">Cities</a></li>
<li><a href="viewEvents.php">Events</a></li>
<li><a href="#">States</a></li>
</ul>
</li>
<li><a href="#">Reports</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Tools</a>
<ul>
<li><a href="AssignCrews.php">Assign Crews</a></li>
<li><a href="#">Clear Crew Members</a></li>
<li><a href="#">Clear VBS Staff Status</a></li>
<li><a href="#">Email Clients</a></li>
<li><a href="#">Export Fields</a></li>
<li><a href="#">Update Grades</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Crews</a>
<ul>
<li><a href="AssignCrews.php">Assign Crews</a></li>
<li><a href="viewCrewsV2.php">Crew List</a></li>
</ul>
</li>
</ul>
</div>
<!-- end #menu -->
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm"><!-- InstanceBeginEditable name="MainContent" -->
<div id="content">
<div class="post">
<h2 class="title"><a href="#">Assign Crews</a></h2>
<div class="entry">
<p>
<table class="dataTable" align="center">
<tr>
<td>
Attendees
</td>
<td>
Assigned
</td>
</tr>
<tr>
<td>
<select multiple="multiple" size="10" id="select1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<a href="#" id="add">Add >></a>
</td>
<td>
<select multiple="multiple" size="10" id="select2"></select>
<a href="#" id="remove"><< Remove</a>
</td>
<tr>
<td>
<input type="button" value="Add >>" id="addbutton" />
</td>
<td>
<input type="button" value="<< remove" id="removebutton" />
</td>
</tr>
</table>
</p>
</div>
</div>
</div>
<!-- InstanceEndEditable --><!-- end #content -->
<div id="sidebar">
<!-- InstanceBeginEditable name="SearchBox" -->
<ul>
</ul>
<!-- InstanceEndEditable -->
<ul><div style="clear: both;"> </div>
<li>
<li>
<h2>Persons</h2>
<ul>
<li><a href="AddNewEvent.php">Add New Event</a></li>
<li><a href="AddAPersonV1.php">Add New Person</a></li>
<li><a href="viewEvents.php">Events List</a></li>
<li><a href="viewPersonsV2.php">Person List</a></li>
</ul>
</li>
<li>
<h2>Crews</h2>
<ul>
<li><a href="AssignCrews.php">Assign Crews</a></li>
<li><a href="#">Clear Crew Members</a></li>
<li><a href="viewCrewsV2.php">Crew List</a></li>
</ul>
</li>
</ul>
</div>
<!-- end #sidebar -->
<div style="clear: both;"> </div>
</div>
</div>
</div>
<!-- end #page -->
</div>
<div id="footer">
<p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
<p>Copyright (c) 2012 Edgar N. Cohen All rights reserved. Design by Edgar N. Cohen</p>
</div>
<!-- end #footer -->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
<!-- InstanceEnd --></html>
I can think of two ways of approaching this. One is by somehow iterating over the second select list and saving those items, or as the user moves each item into the second list, that item would then be saved to the db. Thanks in advance.
ed Cohen