Turning HTML Table into Event Registration Form

**DoubleDee** · Sep 28, 2011 20:45

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

**guido2004** · Sep 29, 2011 00:27

You would have to create a form in each row, but the <form> and </form> tags are only valid outside the entire table, or inside one single <td>:

Code:

<form>
  <table>
    ....
  </table>
</form>

<table>
  <tr>
    <td>
      <form>
        ...
      </form>
    </td>
  </tr>
</table>

The problem with your table is, that you need a form for each row, and the form elements (the select and the button) are in different td's:

Code:

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

I think the easiest solution to this problem would be to put the <select> and the * select * in one td. Something like:

Code:

<!-- 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>
      * Select *
    </td>
[/COLOR][/B]
    <td class="col4"></td>
    <td class="col5"></td>
  </tr>

So you can create a form in each row:

Code:

    <td class="col3">
      <form method="post">
        <select name="number">
          <option value="">--</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
        <input type="hidden" name="eventID" value="2" >
        <input type="submit" name="submit" value="* Select *" >
      </form>
    </td>

I gave a name to the <select> (so you can access that $_POST variable by it's name in the php script), and I also added a hidden field to the form that will contain the event ID.

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

In a form you can choose between get and post, so if you don't want to use get, it will be post.
Form values are not sent in a session. If you want/need to, you can put them in a session in your php script, AFTER the form has been sent (so from $_POST to $_SESSION).

**Cups** · Sep 29, 2011 01:28

Originally Posted by DoubleDee

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?

With respect, I think you are kidding yourself.

If someone wants to probe your backend, they will do it with a POST form just as easy as a GET form.

I know because I made the same mistake when starting out, and was rightly trounced upon by someone here saying "...security through obscurity is not security!".

Use GET when you feel it is right, ie to fetch information if you don't mind uglier urls. Use POST to update or change information.

When starting out you can sometimes gain a benefit by actually seeing variables appear in your address bar as you develop by starting off with GET, then switch your form and form handler to POST before publishing.

(I remember reading some code once where someone had actually set a variable for their forms so they could do this)

PHP Code:


<?php
// setting at the top of the page, easy to find
$method = "GET";

...
// much further away ....
...
echo "<form method = '{$method}'>".  PHP_EOL ;

...

As in all these types of operation, html, js, css, to PHP and Mysql make sure you divide and conquer.

Have a basic html form that works first that sends data to a simple form handler that var_dump()s the data, then model it using PHP to insert the variables where you want them, then have PHP filter and handle the data, then get the data into your db, then add styling, then add behaviours...

**ahundiak** · Sep 29, 2011 07:07

It's likely that I'm not understanding the problem but I don't see why you need multiple forms for this.

PHP Code:


<body>
    <form method="POST" action="post.php"
    <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 name="events[EventId1][attendees]">
                        <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"><input type="submit" value="Choose" /></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 name="events[EventId2][attendees]">
                        <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"><input type="submit" value="Choose" /></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 name="events[EventId3][attendees]">
                        <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"><input type="submit" value="Choose" /></td>
            </tr>
        </tbody>
    </table>
</form>
</body>

A print_r($_POST['events'])) would then yield something like:
Array ( [EventId1] => Array ( [attendees] => ) [EventId2] => Array ( [attendees] => 2 ) [EventId3] => Array ( [attendees] => 4 ) )

**guido2004** · Sep 29, 2011 07:14

Originally Posted by ahundiak

It's likely that I'm not understanding the problem but I don't see why you need multiple forms for this.

Nice solution. Except maybe for the fact that each submit button will submit all "selected" select boxes, and maybe that's not what the OP wants. But maybe it is, let's wait for her reply.

**DoubleDee** · Sep 29, 2011 19:47

Originally Posted by guido2004

Nice solution. Except maybe for the fact that each submit button will submit all "selected" select boxes, and maybe that's not what the OP wants. But maybe it is, let's wait for her reply.

My Form/Page will look like this...

Code:

=========================
Register in 3 Easy Steps...

Step #1: Select a Date and Attendees

					<<Update>>
Event		Cost	Attendees	Total
Flower Show 	$20 	--			<<Select>>
Mankato, MN
Sept 24, 2011

Flower Show	$20	2		$40	<<Select>>
Willmar, MN
Oct 1, 2011

Banjo Jamboree	$50	--			<<Select>>
Brainerd, MN
Oct 8, 2011

=========================

The idea is that a user will click on ONE "Select" Button denoting the ONE Event they want to buy tickets for.

(Think of how some e-commerce sites have an "Add-to-Cart" button next to each Product in a Product Listing. Same concept here.)

So shouldn't ahundiak's code work for my needs?

Debbie

**ahundiak** · Sep 30, 2011 07:17

It will work as long as you are aware that all of the events will always be posted. Normally, this would be fine. You just loop through and see which event actually has something in the attendees column. However, if the user decides to attend more than one event then you will have to decide if you should let them do that or if you should return an error message indicating that only one event can be selected.

Take the code I posted and mess around with the results a bit. The issues will be clearer.

**DoubleDee** · Sep 30, 2011 21:08

Originally Posted by ahundiak

It will work as long as you are aware that all of the events will always be posted. Normally, this would be fine. You just loop through and see which event actually has something in the attendees column. However, if the user decides to attend more than one event then you will have to decide if you should let them do that or if you should return an error message indicating that only one event can be selected.

Take the code I posted and mess around with the results a bit. The issues will be clearer.

If a user selects Attendees for all 3 Events, then I would have no way of knowing for *which* Event they clicked the "Buy Ticket" button...

Debbie

**guido2004** · Oct 1, 2011 02:11

You could give the submit buttons a name (all the same name) and add the EventId as an index to that name (like ahundiak did with the selects). I tested it in FF and IE and it works. That way you can see what button has been pressed.

HTML Code:

            <!-- 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 name="events[EventId1][attendees]">
                        <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"><input type="submit" value="Choose" name="submit[EventId1]"  /></td>
            </tr>

**Sophina** · May 6, 2012 06:01

Can this code be used for Wordpress sites?
I'm trying to find a suitable event registration forms widget for a basic WP site, I've searched everywhere, asked in all the WP support boards and still nothing...

User Tag List

Thread: Turning HTML Table into Event Registration Form

Thread Tools

Display

Turning HTML Table into Event Registration Form

Bookmarks

Bookmarks

Posting Permissions