Ed Price is Hungry

(but not very often)

Another tip of the day

Posting a multidimensional array

A brief tutorial (my first in fact) covering a simple method for posting a multidimensional array using an html form.

Posting arrays is a fact of life - by default every time you post anything from an html form it's posted as an array. It's your job to break it all down again when you process the form. After a while this becomes second nature and you forget that you're even dealing with an array in the first place.

However, sometimes you want to keep a posted value as an array. The usual reason for this is storing a list of options. For instance you might want to give a member of your site the opportunity to set their own screen colours but, for whatever reason, you just want to store those options in one field of your database (or a single cookie, even).

The html code for such a form might be:


<form method="post" action="post-script.php" id="colours_form">

<p><strong>Text colour:</strong>
<input type="radio" name="colour[text]" value="red" />Red
<input type="radio" name="colour[text]" value="blue" />Blue
<input type="radio" name="colour[text]" value="green" />Green
<input type="radio" name="colour[text]" value="yellow" />Yellow
</p>

<p><strong>Background colour:</strong>
<input type="radio" name="colour[background]" value="red" />Red
<input type="radio" name="colour[background]" value="blue" />Blue
<input type="radio" name="colour[background]" value="green" />Green
<input type="radio" name="colour[background]" value="yellow" />Yellow
</p>

<p>
<input type="submit" name="submit" value="Go" />
</p>

</form>

In PHP you would access the posted colours array simply by using $_POST['colour'], and then use serialize to get it into a database friendly format. You can see the form in action here: http://www.evilchicken.biz/tutorials/post_array.php

However, what we really want to discuss here is posting multidimensional arrays, so we'll press on. In truth there aren't likely to be many occasions where you'll need to post multidimensional arrays. In my case I needed to give a client the ability to set a series of custom links (using text and url fields) without forcing them to code the links directly in html. I'll use pretty much the same example here.

Adapting the above form code for the titles/url example might look something like this:

<form method="post" action="post-script.php" id="url_form">

<p><strong>Link Text:</strong>
<input type="text" name="link[text]" />
</p>

<p><strong>Link Url:</strong>
<input type="text" name="link[url]" />
</p>

<p>
<input type="submit" name="submit" value="Go" />
</p>

</form>

That's all very well, but what if we need to post several links? Simple - all we do is add a numerical key to our form:

<form method="post" action="post-script.php" id="url_form">

<p><strong>Link Text:</strong>
<input type="text" name="link[0][text]" />
<input type="text" name="link[1][text]" />
<input type="text" name="link[2][text]" />
<input type="text" name="link[3][text]" />
</p>

<p><strong>Link Url:</strong>
<input type="text" name="link[0][url]" />
<input type="text" name="link[1][url]" />
<input type="text" name="link[2][url]" />
<input type="text" name="link[3][url]" />
</p>

<p>
<input type="submit" name="submit" value="Go" />
</p>

</form>

It took me a while to get this right. At first I missed out the numerical key entirely (e.g. <input type="text" name="link[text][]" /> ) which just resulted in each entry being overwritten by the next one. Then I had the key on the wrong side. Still I got there in the end.

You can play with a demo here: http://www.evilchicken.biz/tutorials/post_multi_array.php

Posted:  October 13, 2008 at 13:14

Filed under: Web Design

Author: Justin

Last edit: October 14, 2008 - 12:56

2 comments

Andrei June 10, 2009 - 15:06

Thanks for the tutorial, but where is the php code?

James Smith September 15, 2009 - 04:53

I was just reminding myself of this via google and your page popped up.

Imagine my surprise. You're famous now, Justin.

Add a comment

HTML code is NOT allowed and will be stripped out.

Please enter the sum of nine plus nine in digits (e.g '19')

Search

Recently posted
Categories
Tags
Monthly Archives

Feeds RSS logo
Recent Twitterings...
  • @petjb did you sort it in the end? if not you can use a positioned background image to create the columns of the chart
    March 11 at 13:30
  • @petjb bottom align a container div - then put your floated divs inside that
    March 11 at 12:52
  • Looking forward to one of our so-rare-they're-almost-mythical jaunts to the cinema today - seeing Shutter Island
    March 11 at 07:41
  • @CinemaslaveJoe THAT GUY? ... wish he was on twitter so I could let him know how stoked I am about that SXSW screening...
    March 11 at 07:21
  • @stokegriff I'm sure you know what need to be done here: http://is.gd/aa7FI
    March 11 at 07:02
  • follow me on Twitter
Copyright

The content on this blog is protected by a Creative Commons license. This is purely to stop people from doing nasty things with my words - in the unlikely event that you do want to reproduce any content here just ask

Creative Commons License

Ed Price Is Hungry by Justin Cawthorne is licensed under a Creative Commons Attribution-Non-Commercial-No Derivative Works 3.0 Unported License.
Based on a work at www.edpriceishungry.com