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
- → next article: Dynamically added form elements lose their margins
Comments:
What about sending two arrays with one submit button? Is this possible? Say example you wanted the foo[] and bar[] array to be sent when you hit one submit button. In this case there would only be one button. Thanks, Shane
Well, as you can see in the last two code examples, multiple arrays are sent to the server. Can you work on that?
Another option would be to nest the arrays. Your name-attribute would look like this:
name="foo[bar][baz]"
Yes I can and did work with it. Great page, nice clear explanation. Thanks