How to send multiple values through one form button

Posted on 04 July 2008 (09:28 AM)

Sometimes you want to have a form with multiple "actions". For instance, in a webshop, you want to list all your products, each paired up with an individual submit button to add that particular product to a shopping cart.

But how can you, on the server-side, differentiate between products?

It gets even more difficult when you have lots of hidden data you wish to send alongside the name or id of the product, but you want to show only one button.

There are a couple of ways to achieve this, all with their own pros and cons. Below I will list some options.

Multiple forms

The easiest way to achieve this, is to use multiple forms in your HTML code, something like this:

<div class="product">
<h2>My product</h2>
<form method="post" action="/shopping-cart">
<input type="hidden" value="my hidden value" name="secret">
<input type="hidden" value="1" name="product-id">
<input type="submit" value="Add this product to your cart">
</form>
</div>
<div class="product">
<h2>My product</h2>
<form method="post" action="/shopping-cart">
<input type="hidden" value="my hidden value" name="secret">
<input type="hidden" value="2" name="product-id">
<input type="submit" value="Add this product to your cart">
</form>
</div>
<div class="product">
[...]
</div>
Download this code: /code/how_to_send_multiple_values_through_one_form_button1.txt

This works, because on the click of a button, only the one form is being submitted, so you'll only receive the correct values on the server-side.

The downside, however, is that it's a bit sloppy. Personally, I can't say I'm happy with having so many different forms in my HTML documents.

The "Image" type button

An ideal solution would be to use the "image" type input field. Create a button-ish graphic, and write an input element like this:

<input type="image" src="my-button.jpg" alt="Add this product to your cart" name="my-product" value="2|secret|foo">
Download this code: /code/how_to_send_multiple_values_through_one_form_button2.txt

As you can see, I have abused the value attribute to stuff all my hidden data, separated by pipes. On the server-side, all I have to do in my PHP code is this...

$hiddenvalues = explode ("|",$_POST["my-product"]);
$product_id = $hiddenvalues[0];
$product_secret = $hiddenvalues[1];
$product_another_secret = $hiddenvalues[2];
Download this code: /code/how_to_send_multiple_values_through_one_form_button3.txt

...in order to fetch all submitted data.

However, Internet Explorer 6 will not allow it. Microsoft's browser does not send data contained inside the "value" attribute of an image-type input element. See for more information this article by Robert Nyman.

Damn it.

Working with arrays

One great thing about forms, is your ability to submit arrays. Consider this bit of HTML:

<input type="hidden" value="my hidden value" name="foo[secret]">
<input type="hidden" value="1" name="foo[product-id]">
<input type="submit" value="Add this product to your cart" name="foo[submit]">
<input type="hidden" value="my hidden value" name="bar[secret]">
<input type="hidden" value="2" name="bar[product-id]">
<input type="submit" value="Add this product to your cart" name="bar[submit]">
<input type="hidden" value="my hidden value" name="baz[secret]">
<input type="hidden" value="3" name="baz[product-id]">
<input type="submit" value="Add this product to your cart" name="baz[submit]">
Download this code: /code/how_to_send_multiple_values_through_one_form_button4.txt

On clicking one of the buttons, for instance, the "foo" button, the following gets sent to the server:

Array
(
[foo] => Array
(
[secret] => my hidden value
[product-id] => 1
[submit] => Add this product to your cart
)
[bar] => Array
(
[secret] => my hidden value
[product-id] => 2
)
[baz] => Array
(
[secret] => my hidden value
[product-id] => 3
)
)
Download this code: /code/how_to_send_multiple_values_through_one_form_button5.txt

As you can see, all arrays are sent, but only the "foo" one contains a "submit" key! So, you can loop through the array, and whenever you find the key "submit", you'll know that's the array the user intended to select.

You can do so using code like this:

foreach ($_POST as $collection) {
if (array_key_exists ('submit', $collection)) {
// this is the one we need
$secret = $collection['secret'];
$id = $collection['product-id'];
break;
}
}
Download this code: /code/how_to_send_multiple_values_through_one_form_button6.txt

This is the best I could come up with. A possible downside, obviously, is submitting lots of superfluous data and having to loop through all of it.

Let me know what you think about it! I'm curious about other possible techniques.
Thanks to Webby for pointing me in this direction.

Filed under HTML and CSS, PHP

← previous article: CSS Tricks episode 1: 100% width in a variable width container

Whatstyle.net

By Harmen Janssen