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…
<!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