Jump to content

Multiple Add-to-Cart buttons


doubledee

Recommended Posts

I am trying to create a registration form for upcoming events, and would like to have an "Add-to-Cart" button next to each choice like this...

 

Car Show		*Add-to-Cart*
Oct, 1, 2011
$20

Craft Show		*Add-to-Cart*
Oct 2, 2011
$30

Fishing Show		*Add-to-Cart*
Oct 8, 2011
$25

 

I think I have the HTML/CSS figured out, but am unsure of how to get the buttons working?!

 

Do I need an HTML Form?

 

How do I have having several "Add-to-Cart" buttons?

 

 

The idea is that whichever button the user clicks, that will then tell my PHP to store the "Event ID" and "Quantity" in either a Cookie, Session, or Database record.

 

So I'm not even sure that I need an HTML Form...

 

Sincerely,

 

 

Debbie

 

Link to comment
Share on other sites

I think you would need a form because those buttons will most likely be INPUT buttons, which are send via HTML form.

 

I don't follow you...

 

As far as I know, an HTML Form can only have ONE "Submit" button, and this page I am describing could have 5-6 "Add-to-Cart" buttons because that is how many choices a person would have when reviewing the "Choose an Event" page.

 

 

Debbie

 

Link to comment
Share on other sites

Just add the name to each submit button.  Adding print_r($_POST); will show values being passed.  Here's a sample.

<html>
<head>
</head>
<body>
<?PHP
print_r($_POST);
?>
<form method="post" action="test40.php">
<input type="submit" name="add_car" value="Add to cart" />
<input type="submit" name="add_craft" value="Add to cart" /> 
<input type="submit" name="add_fishing" value="Add to cart" />
</form>
</body>
</html>

Link to comment
Share on other sites

How do you expect the page to work? If you want visitors to select multiple events, you could use a single form with checkboxes...one for each event.

 

If you only want visitors to select one at a time, you could create several forms with one submit button. Or maybe the multiple submit buttons in one form that others are suggesting. You could even use regular links.

<div><a href="cart.php?select=CarShow">Add to Cart - Car Show</a></div>
<div><a href="cart.php?select=CraftShow">Add to Cart - Craft Show</a></div>

Link to comment
Share on other sites

How do you expect the page to work? If you want visitors to select multiple events, you could use a single form with checkboxes...one for each event.

 

If you only want visitors to select one at a time, you could create several forms with one submit button. Or maybe the multiple submit buttons in one form that others are suggesting. You could even use regular links.

<div><a href="cart.php?select=CarShow">Add to Cart - Car Show</a></div>
<div><a href="cart.php?select=CraftShow">Add to Cart - Craft Show</a></div>

 

The idea is that a user needs to choose ONE Date/Location while registering for a Event.

 

Which is the *best* way to do this?

 

After a user decides they are interested in attending an Event (e.g. Flower Show), there is a 3-Step Registration...

 

1.) Choose a Date/Location

 

2.) Log-In/Create an Account

 

3.) Enter Payment Details

 

 

I suppose I will have a "Shopping Cart", but not in traditional terms, since the assumption is that the user is registering for one - and only one - Event.

 

Thanks,

 

 

Debbie

 

Link to comment
Share on other sites

I am building a registration process where someone buys a ticket to an Event (e.g. Flower Show).

 

There are 3 steps:

 

1.) Select a Date/Location and Enter Attendees

2.) Log-In/Create an Account

3.) Pay with Credit Card

 

 

On Step #1, my page looks like this...

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

Step #1: Select a Date and Attendees

Event		Cost	Attendees	(Update) Total
Flower Show	$20	_1_		$20		<<Choose this Event>>
Mankato, MN
Sept 24, 2011

Flower Show	$20	_3_		$60		<<Choose this Event>>
Willmar, MN
Oct 1, 2011

Banjo Jamboree	$50	_1_		$50		<<Choose this Event>>
Brainerd, MN
Oct 8, 2011

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

 

When a user clicks <<Choose this Event>>, I ultimately need to capture:

- EventID (which is the Event Name/Date/Location)

- NumberOfAttendees

 

I am uncertain whether this page needs to be an HTML Form or if I capture and store the data in another way?!  (All of my web designer friends keep telling me I need an HTML Form, but I'm not so sure...)

 

 

Debbie

 

Link to comment
Share on other sites

Yes you do need (should have) an HTML form for a number of reasons.

  • They provide a means to get input from the user
  • You can control data much easier.

 

So can you give me a hint of how the HTML code would look as far as How and Where and What I capture?

 

Like I said, what I really need to do my back-end processing is just:

 

- EventID

- NumberOfAttendees

 

I'm not sure how to capture that information from Row #2 in the sample above.

 

 

Debbie

 

Link to comment
Share on other sites

Either use a simple text link or image, in which case you would pass the event ID chosen in the link

 

Inside the event loop:

<a href="myscript.php?eventId=<?php echo $event['eventId']; ?>">Choose this Event</a>

 

 

Or use multiple forms, one form for each button and have a hidden field in each button to send the event ID. Multiple submit buttons for the same form will only work if each button has a unique label and you can identify the event based on that - which is not a good way to do it.

 

Inside the event loop:


<form action="myscript.php" method="post">
    <input type="hidden" name="eventId" value="<?php echo $event['eventId']; ?>" />
    <input type="submit" value="Choose this Event" />
</form>

Link to comment
Share on other sites

On Step #1, my page looks like this...

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

Step #1: Select a Date and Attendees

Event		Cost	Attendees	(Update) Total
Flower Show	$20	_1_		$20		<<Choose this Event>>
Mankato, MN
Sept 24, 2011

Flower Show	$20	_3_		$60		<<Choose this Event>>
Willmar, MN
Oct 1, 2011

Banjo Jamboree	$50	_1_		$50		<<Choose this Event>>
Brainerd, MN
Oct 8, 2011

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

 

 

Yep, if you want to collect data, you'll need an HTML form.

 

Does the 1st step need to be set up like above? I'm not a fan of using multiple forms on a single page. Could you, for example, change the setup to

 

=========================
Which event would you like to attend?
<< radio button >> Flower Show (Mankato, MN; Sept 24, 2011; $20/per person)
<< radio button >> Flower Show (Willmar, MN; Oct 1, 2011; $20/per person)
<< radio button >> Banjo Jamboree (Brainerd, MN; Oct 8, 2011; $50/per person)

Number of attendees? << text field >>

Total: << calculated total goes here - if needed >>

<< submit button >>
=========================

 

 

Or if you prefer to HTML links, you could just ask for the number of attendees in the next step. But then it would be "4 easy steps". ;)

Link to comment
Share on other sites

How do you expect the page to work? If you want visitors to select multiple events, you could use a single form with checkboxes...one for each event.

 

If you only want visitors to select one at a time, you could create several forms with one submit button. Or maybe the multiple submit buttons in one form that others are suggesting. You could even use regular links.

<div><a href="cart.php?select=CarShow">Add to Cart - Car Show</a></div>
<div><a href="cart.php?select=CraftShow">Add to Cart - Craft Show</a></div>

 

I don't like passing data in the URL for security reasons...

 

I've seen in books where a hacker can modify the query string - and in my case change the price?!  :o

 

It seems like using $_POST or $_SESSION is safer...

 

 

Debbie

Link to comment
Share on other sites

Yep, if you want to collect data, you'll need an HTML form.

 

Does the 1st step need to be set up like above? I'm not a fan of using multiple forms on a single page. Could you, for example, change the setup to

 

=========================
Which event would you like to attend?
<< radio button >> Flower Show (Mankato, MN; Sept 24, 2011; $20/per person)
<< radio button >> Flower Show (Willmar, MN; Oct 1, 2011; $20/per person)
<< radio button >> Banjo Jamboree (Brainerd, MN; Oct 8, 2011; $50/per person)

Number of attendees? << text field >>

Total: << calculated total goes here - if needed >>

<< submit button >>
=========================

 

 

Or if you prefer to HTML links, you could just ask for the number of attendees in the next step. But then it would be "4 easy steps". ;)

 

That is an interesting alternative, but since I spent all week debating how to design this, and the consensus was "Minimize Screens/Clicks" I think I'll pass.  That, and I like the page I created.

 

So here is what code 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>

 

Can someone help me figure out where and how to add an HTML Form to my HTML Table?! :confused:

 

Thanks,

 

 

Debbie

 

Link to comment
Share on other sites

I have written up the code for you in a very simple form..

Hopefully this will put you on the right track.

<!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>
<script type="text/javascript">
	function getTotal(obj) {
		var ind = document.getElementById(obj + '_attendees').selectedIndex;
		if (ind != 0) {
			var cost = document.getElementById(obj + '_cost').value;
			var attendees = document.getElementById(obj + '_attendees').options[ind].value;
			document.getElementById(obj + '_total').innerHTML = '$' + (cost*attendees);
		} else {
			document.getElementById(obj + '_total').innerHTML = '$0';
		}
	}
</script>
</head>

<body>
<form method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
<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
				<input type="hidden" id="row1_cost" name="cost[1]" value="20" /></td>
			<td class="col3">
				<select name="attendees[1]" onchange="getTotal('row1')" id="row1_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" id="row1_total">$0</td>
			<td class="col5"><input type="submit" name="row[1]" value="Add to Cart" /></td>
		</tr>

		<!-- Row 2 -->
		<tr>
			<th scope="row" class="colHeader">
				Flower Show<br />
				Willmar, MN<br />
				Oct 1, 2011
			</th>
			<td class="col2">$20
				<input type="hidden" id="row2_cost" name="cost[2]" value="20" /></td>
			<td class="col3">
				<select name="attendees[2]" onchange="getTotal('row2')" id="row2_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" id="row2_total">$0</td>
			<td class="col5"><input type="submit" name="row[2]" value="Add to Cart" /></td>
		</tr>

		<!-- Row 3 -->
		<tr>
			<th scope="row" class="colHeader">Banjo Jamboree<br>
					Brainerd, MN<br>
					Oct 8, 2011 </th>
			<td class="col2">$50
				<input type="hidden" id="row3_cost" name="cost[3]" value="50" /></td>
			<td class="col3">
				<select name="attendees[3]" onchange="getTotal('row3')" id="row3_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" id="row3_total">$0</td>
			<td class="col5"><input type="submit" name="row[3]" value="Add to Cart" /></td>
		</tr>
	</tbody>
</table>
</form>
<?php

if (isset($_POST['row'])) {
	$selected  = key($_POST['row']);
	echo '<h3>Form Output</h3>';
	echo 'The user has selected Row #' , $selected , ', which are valued at $' , $_POST['cost'][$selected] , ' each.<br/>
	They have chosen ' , $_POST['attendees'][$selected] , ' ticket(s) at a total cost of $' , ($_POST['attendees'][$selected]*$_POST['cost'][$selected]);
	echo '<br/><br/>-- POST OUTPUT --<br/><pre>'.print_r($_POST,true).'</pre>';
}

?>
</body>
</html>

Link to comment
Share on other sites

I don't like passing data in the URL for security reasons...

 

I've seen in books where a hacker can modify the query string - and in my case change the price?!  :o

 

It seems like using $_POST or $_SESSION is safer...

 

 

Although it requires a little more work to tamper with $_POST variables, it can be done. I'm not as familiar with $_SESSION variables. But in the end, you need to pass the data using GET or POST before being able to set a SESSION variable.

 

As for the security issue, don't send price through the form. Only send what needs to be sent. If this was my form, I would

[*]Store all the event information in a database

[*]Use the database to populate the form options for the event

[*]Have the user complete the form...which would only pass the event ID and number of registrants

[*]Verify that event ID and number of registrants are numbers

[*]Make sure the event ID exists in the database

[*]Have them sign in / create an account

[*]Pull all the necessary event information from the database using the passed event ID

[*]Calculate the registration total

[*]Collect the billing information

[*]Ask user to verify their order and give them an option to edit the order

[*]Display the receipt

 

 

If the database contains dozens (or more) of things they can register for, I would lean towards using a link for each of the events which would only pass the event ID. Then the next step would ask them for the number of attendees and continue through the steps outlined above.

Link to comment
Share on other sites

I have a Form that has multiple "Buy It" (i.e. submit) buttons.

 

Below is a code snippet...

<!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;	/**/
/*			background-color: #FFFFCC;	/**/
	}

	tr#tableHeader th{
		padding: 0.5em 1em;
/*			height: 50px; /**/
		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>
<form method="POST" action="">
	<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="event1">
						<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="Buy Tickets" /></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="event2">
						<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="Buy Tickets" /></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="event3">
						<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="Buy Tickets" /></td>
			</tr>
		</tbody>
	</table>
</form>
</body>
</html>

<?php
print_r($_POST);
var_dump($_POST);
?>

 

If I run this code, and just choose a "# of Attendees" for ONE drop-down, then everything is okay.

 

But if I select a "# of Attendees" for ALL drop-downs, then I get all 3 values.

 

How can I capture the "# of Attendees" just for the corresponding "Buy Tickets" button that was clicked?  (No JavaScript please!!!)

 

There must be some ways to make this work?!  :confused:

 

My end goal is to capture the "Event ID" and "# of Attendees" associated with the "Buy Tickets" button that is clicked so I can continue registering the person for said Event.

 

I'd prefer just using HTML and PHP.

 

And I'd like to just use ONE Form instead of multiple Forms which others have already suggested...

 

Thanks,

 

 

Debbie

 

Link to comment
Share on other sites

Redesign the form into a single form and use the goto function on posts to cancel out irrelevance.

 

That makes no sense?!

 

If I select for "# of Attendees" of 1 for Event1, and

"# of Attendees" of 2 for Event2, and

# of Attendees" of 3 for Event 3, and then I click on the "Buy Ticket" for Event3, I get this...

 

array

  'event1' => string '1' (length=1)

  'event2' => string '2' (length=1)

  'event3' => string '3' (length=1)

 

So which button did I click?!  You can't tell...

 

 

Debbie

 

Link to comment
Share on other sites

The code I provided earlier, only used JavaScript to display the price to the user in realtime.

You can take that out and the PHP and HTML side of things will still function.

 

To solve your current problem, your submit button should have a name that corresponds to the event being selected, you can then use PHP to get the appropriate information.

 

The thing with PHP is that all form elements will be passed if they have a name, so no matter what Submit button you click, all of the information will be sent across..

 

My previous solution shows one way to do it, but you could also create (no ideal) a form for each of the different events

<form>
<select name="event1">
<option></option>
<option></option>
<option></option>
</select>
<input type="submit" value="Submit 1">
</form>

<form>
<select name="event1">
<option></option>
<option></option>
<option></option>
</select>
<input type="submit" value="Submit 1">
</form>

And so on

Link to comment
Share on other sites

Buddski,

 

Here is hoping you are online tomorrow night (Friday) and this weekend.

 

Looked at your code again now that I know it wasn't all JavaScript.

 

Didn't exactly follow it, but I'm tired and it is late.

 

Maybe I can ask for clarification tomorrow after work?

 

How does this approach compare to having a separate Form for each Event listing?

 

Is the code above secure?

 

Is it good enough to use on a live e-commerce site?

 

Or is there an even better way to do what I want?

 

 

Debbie

 

Link to comment
Share on other sites

Make each select/submit pair an array in the form, Then using array_keys, you can get the value of the select field that corresponds to the submit button that was clicked.

 

<form method="post">
<select name="select[0]">
<?php
for( $i = 0; $i < 10; $i++ ) {
   echo "<option value=\"$i\">$i</option>\n";
}
?>
</select>
<input type="submit" name="submit[0]" value="Buy This One"><br>

<select name="select[1]">
<?php
for( $i = 0; $i < 10; $i++ ) {
   echo "<option value=\"$i\">$i</option>\n";
}
?>
</select>
<input type="submit" name="submit[1]" value="Buy This One"><br>

<select name="select[2]">
<?php
for( $i = 0; $i < 10; $i++ ) {
   echo "<option value=\"$i\">$i</option>\n";
}
?>
</select>
<input type="submit" name="submit[2]" value="Buy This One"><br>

</form>
<?php

$submit = array_keys($_POST['submit']);
echo $_POST['select'][$submit[0]]; // <--- the value of the corresponding select field is in this array element.


Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.