Aug 19

A Better Way to Handle HTML Field Arrays With PHP

HTML, PHP

Adding HTML fields so that when they get submitted back to the server in an array format is easy, but what about when you want to group multiple fields together to make up a single entry? Most of the time, that’s when things get a bit tricky. In order for the array fields to be related to each other as one record, you often end up having to place an ID or an incremented number in the array somewhere, usually something like this:

<p>
Caption: <input type="text" name="images[0][name]" size="20" /> 
Image: <input type="file" name="images[0][url]" />
</p>
<p>
Caption: <input type="text" name="images[1][name]" size="20" /> 
Image: <input type="file" name="images[1][url]" />
</p>

This is an okay solution for form elements that are not likely to change, but this method quickly gets very complex when adding additional form elements dynamically to the DOM through javascript. You can’t just copy the HTML code with javascript anymore - you have to increment the number in order to keep those new fields together when they are submitted to the server. The end result most of the time looks ugly and hackish. So what if we could simplify everything by submitting the fields together in a straightforward way that will cut all that number incrementing out? Our HTML would look something like this:

<p>
Caption: <input type="text" name="images[name][]" size="20" /> 
Image: <input type="file" name="images[url][]" />
</p>
<p>
Caption: <input type="text" name="images[name][]" size="20" /> 
Image: <input type="file" name="images[url][]" />
</p>

This code will allow for direct javascript HTML copying/appending with no problems. So how does that data look when it gets submitted to the server?

  [name]	=>	[0] => "Google"
 			[1] => "Yahoo!"
  [url] 	=>	[0] => "http://www.google.com/images/google.gif"
 			[1] => "http://www.yahoo.com/images/yahoo.gif"

So we have all our data here, but unfortunately it’s not organized in a way that we can use directly in a foreach loop like we would have been able to do before. This is where the ‘arrayFlipConvert’ function comes in:

/**
 * Convert to useful array style from form input style
 * @link http://www.webmasterkitchen.com/
 * 
 * Basically, input an array like this:
 * [name]	=>	[0] => "Google"
 *			[1] => "Yahoo!"
 * [url]	=>	[0] => "http://www.google.com"
 *			[1] => "http://www.yahoo.com"
 *
 * And you will get this:
 * [0]	=>	[name] => "Google"
 *			[title] => "http://www.google.com"
 * [1]	=>	[name] => "Yahoo!"
 *			[title] => "http://www.yahoo.com"
 */
function arrayFlipConvert(array $input) {
	$output = array();
	foreach($input as $key => $val) {
		foreach($val as $key2 => $val2) {
			$output[$key2][$key] = $val2;
		}
	}
	return $output;
}

So now we can pass our POST (or GET) data through the function and get a nice pretty array format in return that we can then use in a foreach loop:

<?php
if(isset($_POST['images'] && is_array($_POST['images'])) {
    $niceImages = arrayFlipConvert($_POST['images']);
    foreach($niceImages as $image) {
        // Do something with your image data
        echo $image['name'];
        echo $image['url'];
    }
}
 
?>