Search jQuery

jQuery Forum

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

in Using jQuery • 11 years ago

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:

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
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:

<!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">
<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" />
<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');
});
// when a element of the first list is added to the second list
$('#select2').onChange(function() {
alert("element added to the Assigned List");
});
});
</script>
<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>
<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>
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<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>
<div id="sidebar">
<ul>
</ul>
<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>
<div style="clear: both;"> </div>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Response title

Attachments

jQuery Forum

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

Statistics

Tags

Actions

Related Posts