Beginners PHP Tutorials - Arrays - Part 3

PHP Arrays and HTML Forms - Part 3.

PHP Arrays and HTML Forms

This is tutorial #3 in our Array Series. Today you’ll learn how to collect data from a web form and convert it into an array for further processing on the backend.

Why would you need to create an array from a web form? Good question and here is a good answer!

What would you like on that Pizza, sir?

Let’s look at a simple web form for a pizza shop that provides online ordering. We’ll skip over the parts of the form that collects name and address, etc., and go right for the meat (and cheese) of the problem.

The form above allows the user to select the pizza size from a drop-down containing the values Large, Medium, and Small. Nothing special going on there. We name that drop-down “size”, and use the built-in ‘option value’ field to add all of the sizes. In the code view, it would look like this:

<select name="select"> <option>-- Select --</option> <option value="Large">Large</option> <option value="Medium">Medium</option> <option>Small</option> </select>

The real magic happens when we get to the add-on ingredients. Because we want the user to be able to select multiple ingredients, radio buttons were not an option. That’s because radio buttons use a simple off/on methodology. If you have multiple radio buttons in a group, radio buttons are not an option.

We could have used a multi-select drop-down list. That’s the type of drop-down where you can press and hold the Ctrl key while selecting multiple options, but that solution can be difficult for users to grasp. So, the checkbox is the right choice. It allows the user to select multiple options by simply click on each ingredient choice.

Normally, a checkbox looks like this when in code view:
<input type="checkbox" name="SomeName" value="SomeValue" />

If you wanted to have multiple checkboxes to support our ingredients list, you could create them like this:

<input type="checkbox" name="Cheese" value="xtracheese" />
<input type="checkbox" name="SomeName1" value="pepperoni" />
<input type="checkbox" name="SomeName2" value="sausage" />
<input type="checkbox" name="SomeName3" value="onions" />

But that wouldn’t be a very efficient way to do it. Why? Because you would have to write code on the backend using a lot of “if” statements to loop through each variable to see if it was checked. That’s not very efficient.

PHP Arrays to the rescue

By simply altering the way we name each checkbox slightly, we can have the HTML form create an array and pass it to our backend processing script.
<input type="checkbox" name="options[ ]" value="xtracheese" /> <input type="checkbox" name="options[ ]" value="pepperoni" /> <input type="checkbox" name="options[ ]" value="sausage" /> <input type="checkbox" name="options[ ]" value="onions" />

Do you see the difference between this example and the one above it? Look carefully.

Notice that all of the checkboxes have the same name value. They are all called ‘options’. Now, there is nothing special about the name. We could have called them all ‘ingredients’, or anything else for that matter. The real magic is the square brackets [ ] that we added after the name.

These brackets tell PHP that we are passing it an array and that multiple values may exist. If we had eliminated those brackets, and simply created four checkboxes all with the same name, PHP would only recognize the checked value of the first checkbox it processed. The additional ingredient choices would be lost.

Processing that pizza order

So now that you have that array of choices passed to your backend script, what do you do with them? You already now the answer. You simply process it using the foreach function that you already learned.

Depending upon whether your form uses the get or the post method, your array is in the $_POST or the $_GET array. Let’s assume $_POST for this example.

foreach($_POST[‘options’] as $ingredients) {

< add your own processing here>;

}

Lets give it a try. Create a

Lets give it a try, create a HTML page and paste the following code in between the <body> tags:

<form id="form1" name="form1" method="post" action="pizza-process.php"> <p><strong>Papa's Famous Pizza</strong></p> <p><br /> <select name="size"> <option>-- Select --</option> <option value="Large">Large</option> <option value="Medium">Medium</option> <option>Small</option> </select> </p> <p>What would you like on that Pizza, sir?</p> <p> <input type="checkbox" name="options[ ]" value="xtracheese" /> Extra Cheese <input type="checkbox" name="options[ ]" value="pepperoni" /> Pepperoni<br /> <input type="checkbox" name="options[ ]" value="sausage" /> Sausage <input type="checkbox" name="options[ ]" value="onions" /> Onions</p> <p> <input type="submit" name="button" id="button" value="Order Your Pizza" /> </p> </form>

Create a PHP page and call it pizza-process.php, paste the following code into the PHP file :

<?php echo "I would like a $_POST[size] Pizza <br>"; // find what extras are required foreach($_POST[options] as $ingredients) { echo"With $ingredients <br>"; } ?>

Upload it to your web server. Open the HTML document in your browser and fill in the details, hit the button and your selection should be displayed.

View all Beginners Tutorials »