How to use a select list to update a mysql db table

How to use a select list to update a mysql db table
OK, I have a web page that has 2 select lists: select1 and select2. Using jQuery I can allow the user to put a selected list item in select1 list to the select2 list. Everything is ok. What I need is one of these possibilities:
  1. When the user clicks the Add button/link on the Attendees list. an event is fired that then gets the option value and puts that value into a MySQL db table. OR
  2. A button is at the bottom of the form and when clicked, some jQuery code is called that iterates over the select2 list option values and inserts them into a MySQL db table.
Here is the code for the page that I now have:


  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/personEventsPages.dwt.php" codeOutsideHTMLIsLocked="false" -->
  5. <head>
  6. <!--
  7. Design by Free CSS Templates
  8. http://www.freecsstemplates.org
  9. Released for free under a Creative Commons Attribution 2.5 License

  11. Name       : Republic  
  12. Description: A two-column, fixed-width design with dark color scheme.
  13. Version    : 1.0
  14. Released   : 20090910

  16. -->
  17. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  18. <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
  19. <!-- InstanceBeginEditable name="doctitle" -->
  20. <title>Assign Crews</title>
  21. <script src="javascript/jquery-1.7.2.js" type="text/javascript"></script>
  22. <script type="text/javascript">
  23. $().ready(function() {
  24.  // this was for a clickable link <a href>
  25. $('#add').click(function() {
  26. return !$('#select1 option:selected').remove().appendTo('#select2');
  27. });
  28.  // this one is for a button
  29. $('#addbutton').click(function() {
  30.  return !$('#select1 option:selected').remove().appendTo('#select2');
  31. });
  32.  // this was for a clickable link <a href>
  33. $('#remove').click(function() {
  34. return !$('#select2 option:selected').remove().appendTo('#select1');
  35. });
  36.  // this one is for a button.
  37. $('#removebutton').click(function() {
  38.  return !$('#select2 option:selected').remove().appendTo('#select1');
  39. });
  40. // when a element of the first list is added to the second list
  41. $('#select2').onChange(function() {
  42.  alert("element added to the Assigned List");
  43. });

  45. });
  46. </script>

  48. <!-- InstanceEndEditable -->
  49. <!-- InstanceBeginEditable name="head" -->
  50. <!-- InstanceEndEditable -->
  51. <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
  52. <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

  54. </head>
  55. <body>
  56. <div id="wrapper">
  57.  <div id="header">
  58.  <div id="logo">
  59.  <h1><a href="index.php">Church Events</a></h1>
  60.  </div>
  61.  </div>
  62.  <!-- end #header -->
  63.  <div id="menu">
  64.    <ul id="MenuBar1" class="MenuBarHorizontal">
  65.         <li><a href="#" class="MenuBarItemSubmenu">Persons</a>
  66.           <ul>
  67.             <li><a href="AddAPersonV1.php">Add Persons</a></li>
  68.             <li><a href="viewPersonsV2.php">Persons</a></li>
  69.           </ul>
  70.         </li>
  71.         <li><a class="MenuBarItemSubmenu" href="#">Edit</a>
  72.           <ul>
  73.             <li><a href="viewChurchesV5.php">Churches</a></li>
  74.             <li><a href="viewCitiesV2.php">Cities</a></li>
  75.             <li><a href="viewEvents.php">Events</a></li>
  76.             <li><a href="#">States</a></li>
  77.           </ul>
  78.         </li>
  79. <li><a href="#">Reports</a></li>
  80.    <li><a class="MenuBarItemSubmenu" href="#">Tools</a>
  81.      <ul>
  82.              <li><a href="AssignCrews.php">Assign Crews</a></li>
  83.             <li><a href="#">Clear Crew Members</a></li>
  84.             <li><a href="#">Clear VBS Staff Status</a></li>
  85.   <li><a href="#">Email Clients</a></li>
  86.              <li><a href="#">Export Fields</a></li>
  87.              <li><a href="#">Update Grades</a></li>
  88.          </ul>
  89.      </li>
  90.    <li><a href="#" class="MenuBarItemSubmenu">Crews</a>
  91.      <ul>
  92.               <li><a href="AssignCrews.php">Assign Crews</a></li>
  93.        <li><a href="viewCrewsV2.php">Crew List</a></li>
  94.          </ul>
  95.    </li>
  96.    </ul>
  97. </div>
  98.  <!-- end #menu -->
  99.  <div id="page">
  100.  <div id="page-bgtop">
  101.  <div id="page-bgbtm"><!-- InstanceBeginEditable name="MainContent" -->
  102.    <div id="content">
  103.      <div class="post">
  104.        <h2 class="title"><a href="#">Assign Crews</a></h2>
  105.         <div class="entry">
  106.          <p>
  107.             <table class="dataTable" align="center">
  108.             <tr>
  109.             <td>
  110.             Attendees
  111.             </td>
  112.             <td>
  113.             Assigned
  114.             </td>
  115.             </tr>
  116.             <tr>
  117.             <td>
  118.             <select multiple="multiple" size="10"  id="select1">
  119.             <option value="1">Option 1</option>
  120.             <option value="2">Option 2</option>
  121.             <option value="3">Option 3</option>
  122.             <option value="4">Option 4</option>
  123.             </select>
  124.             <a href="#" id="add">Add >></a>  
  125.             </td>
  126.             <td>
  127.            
  128.             <select multiple="multiple" size="10" id="select2"></select>
  129.             <a href="#" id="remove"><< Remove</a>  
  130.             </td>
  131.             <tr>
  132.             <td>
  133.             <input type="button" value="Add >>" id="addbutton"  />
  134.             </td>
  135.             <td>
  136.             <input type="button" value="<< remove" id="removebutton"  />
  137.             </td>
  138.             </tr>
  139.             </table>
  140.             </p>
  141.         </div>
  142.        </div>
  143.      
  144.      </div>
  145.  <!-- InstanceEndEditable --><!-- end #content -->
  146.    <div id="sidebar">
  147.    <!-- InstanceBeginEditable name="SearchBox" -->
  148.       <ul>
  149.       </ul>
  150.       <!-- InstanceEndEditable -->
  151.      <ul><div style="clear: both;">&nbsp;</div>
  152.    
  153.       <li>
  154.             <li>
  155.               <h2>Persons</h2>
  156.               <ul>
  157.                 <li><a href="AddNewEvent.php">Add New Event</a></li>
  158.                 <li><a href="AddAPersonV1.php">Add New Person</a></li>
  159.                 <li><a href="viewEvents.php">Events List</a></li>
  160.                 <li><a href="viewPersonsV2.php">Person List</a></li>
  161.                 </ul>
  162.               </li>
  163.  <li>
  164.              <h2>Crews</h2>
  165.              <ul>
  166.               <li><a href="AssignCrews.php">Assign Crews</a></li>
  167.              <li><a href="#">Clear Crew Members</a></li>
  168.                 <li><a href="viewCrewsV2.php">Crew List</a></li>
  169.              </ul>
  170.             </li>            
  171.      </ul>
  172.      </div>
  173.  <!-- end #sidebar -->
  174.  <div style="clear: both;">&nbsp;</div> 
  175.  </div>
  176.  </div>
  177.  </div>
  178.  <!-- end #page -->
  179. </div>
  180.  <div id="footer">
  181.  <p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
  182.         <p>Copyright (c) 2012 Edgar N. Cohen All rights reserved. Design by Edgar N. Cohen</p>
  183.  </div>
  184.  <!-- end #footer -->
  185. <script type="text/javascript">
  186. var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
  187.     </script>
  188. </body>
  189. <!-- InstanceEnd --></html>