SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Turning HTML Table into Event Registration Form

    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

  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,495
    Mentioned
    161 Post(s)
    Tagged
    4 Thread(s)
    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).

  3. #3
    SitePoint Wizard silver trophybronze trophy Cups's Avatar
    Join Date
    Oct 2006
    Location
    France, deep rural.
    Posts
    6,869
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post

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

  4. #4
    SitePoint Guru
    Join Date
    Nov 2003
    Location
    Huntsville AL
    Posts
    689
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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 />
                        
    MankatoMN<br />
                        
    Sept 242011
                    
    </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 />
                        
    WillmarMN<br />
                        
    Oct 12011
                    
    </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>
                            
    BrainerdMN<br>
                            
    Oct 82011 </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 ) )

  5. #5
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,495
    Mentioned
    161 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ahundiak View Post
    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.

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by guido2004 View Post
    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

  7. #7
    SitePoint Guru
    Join Date
    Nov 2003
    Location
    Huntsville AL
    Posts
    689
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ahundiak View Post
    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

  9. #9
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,495
    Mentioned
    161 Post(s)
    Tagged
    4 Thread(s)
    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>

  10. #10
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •