I just built a page that is part of an Event Registration checkout process.

The design is locked down, and uses an HTML Form (per lots of advice here at SitePoint!!)

Now I need to modify my HTML Form so I can gather which Event people want to attend and how many Attendees there will be.

I chose the PHP forum because there may be other alternatives to using an HTML Form...

In the end, I just need to capture the "Event ID" and "Number of Attendees" so I can add that to a back-end and continue the Checkout Process.

The page below will ultimately be database-driven, with data coming from MySQL and populated by PHP, but one step at a time?!

Also, the "Event ID" is not present in my static HTML, but would be known once I convert my code to use PHP to populate things.


Here is what I have so far...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Untitled Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}

		table{
			border-collapse:collapse;
		}
		
		table, th, td{
			border: 1px solid black;
		}

		tr#tableHeader{
			background-color: #E6E6E6;	/**/
		}

		tr#tableHeader th{
			padding: 0.5em 1em;
			font-weight: bold;
			text-align: left;
			vertical-align: bottom;
		}

		#tableHeader #col1{
			width: 150px;
		}

		tr th.colHeader{
			padding: 0.5em 1em;
			text-align: left;
			font-weight: normal;
		}
		
		td{
			padding: 0.5em 2em;
			text-align: center;
			vertical-align: top;
		}

		select{
			width: 80px;
		}

	</style>
</head>

<body>
	<table id="eventsTable">
		<thead>
			<tr id="tableHeader">
				<th scope="col" id="col1">
					Event	Details
				</th>
				<th scope="col" id="col2">
					Ticket Price
				</th>
				<th scope="col" id="col3">
					# of Attendees
				</th>
				<th scope="col" id="col4">
					<a href="">Update</a><br />
					Total
				</th>
				<th scope="col" id="col5">
					Choose One
				</th>
			</tr>
		</thead>
		<tbody>
			<!-- Row 1 -->
			<tr>
				<th scope="row" class="colHeader">
					Flower Show<br />
					Mankato, MN<br />
					Sept 24, 2011
				</th>
				<td class="col2">$20</td>
				<td class="col3">
					<select>
						<option value="">--</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>
				</td>
				<td class="col4"></td>
				<td class="col5">* Select *</td>
			</tr>

			<!-- Row 2 -->
			<tr>
				<th scope="row" class="colHeader">
					Flower Show<br />
					Willmar, MN<br />
					Oct 1, 2011
				</th>
				<td class="col2">$20</td>
				<td class="col3">
					<select>
						<option value="">--</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>
				</td>
				<td class="col4"></td>
				<td class="col5">* Select *</td>
			</tr>

			<!-- Row 3 -->
			<tr>
				<th scope="row" class="colHeader">Banjo Jamboree<br>
						Brainerd, MN<br>
						Oct 8, 2011 </th>
				<td class="col2">$50</td>
				<td class="col3">
					<select>
						<option value="">--</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>
				</td>
				<td class="col4"></td>
				<td class="col5">* Select *</td>
			</tr>
		</tbody>
	</table>
</body>
</html>
Would someone help me figure out how to add multiple Buttons where it says "* Select*" and then determine how to capture "Event ID" and "Number of Attendees"??

By the way, I am big on security, and not so crazy about passing data in the URL since it can be seen and changed.

That is why I am thinking that passing the data using $_POST or $_SESSION would make the most sense...

What do you think?

Thanks,


Debbie