JavaScript Editor Javascript source editor     Web programming 

Team LiB
Previous Section Next Section

Accessing Form Input with User-Defined Arrays

The previous example showed how to gather information from HTML elements that submit a single value per element name, such as text fields, text areas, and radio buttons. This leaves us with a problem when working with elements like SELECT, as it possible for the user to choose one or more items in a multiple SELECT list. If we name the SELECT element with a plain name, like so

<select name="products" multiple>

the script that receives this data has access to only a single value corresponding to this name ($_POST[products]). We can change this behavior by renaming an element of this kind so that its name ends with an empty set of square brackets. We do this in Listing 10.3.

Listing 10.3. An HTML Form Including a SELECT Element
1: <html>
2: <head>
3: <title> An HTML form including a SELECT element</title>
4: </head>
5: <body>
6: <form action="send_formwithselect.php" method="POST">
7: <p><strong>Name:</strong><br>
8: <input type="text" name="user">
9: <p><strong>Select Some Products:</strong> <br>
10: <select name="products[]" multiple>
11: <option value="Sonic Screwdriver">Sonic Screwdriver</option>
12: <option value="Tricoder">Tricorder</option>
13: <option value="ORAC AI">ORAC AI</option>
14: <option value="HAL 2000">HAL 2000</option>
15: </select>
16: <p><input type="submit" value="send"></p>
17: </form>
18: </body>
19: </html>

Put these lines into a text file called formwithselect.html, and place that file in your Web server document root. Next, in the script that processes the form input, we find that input from the "products[]" form element created on line 10 is available in an array called $_POST[products]. Because products[] is a SELECT element, we offer the user multiple choices using the option elements on lines 11 through 14. We demonstrate that the user's choices are made available in an array in Listing 10.4.

Listing 10.4. Reading Input from the Form in Listing 10.3
1: <?php
2: echo "<p>Welcome <b>$_POST[user]</b>!</p>";
3:  echo "<p>Your product choices are:<br>";
4: if (!empty($_POST[products])) {
5:     echo "<ul>";
6:     foreach ($_POST[products] as $value) {
7:        echo "<li>$value";
8:     }
9:     echo "</ul>";
10: }
11: ?>

Put these lines into a text file called send_formwithselect.php, and place that file in your Web server document root. Now access the form with your Web browser and fill out the fields. Figure 10.2 shows an example.

Figure 10.2. Form created in Listing 10.3.

On line 2 of the script in Listing 10.4, we access the $_POST[user] variable, which is derived from the user form element. On line 4, we test for the $_POST[products] variable. If $_POST[products] is present, we loop through it on line 6, and output each choice to the browser on line 7. The text within the value attribute of the selected OPTION element becomes one of the stored values in the array.

Submit the form and you might see something like that shown in Figure 10.3.

Figure 10.3. Sample output of send_formwithselect.php.

Although the looping technique is particularly useful with the SELECT element, it can work with other types of form elements. For example, by giving a number of check boxes the same name, you can enable a user to choose many values within a single field name.

As long as the name you choose ends with empty square brackets, PHP compiles the user input for this field into an array. We can replace the SELECT elements from lines 1114 in Listing 10.3 with a series of check boxes to achieve the same effect:

<input type="checkbox" name="products[]"
        value="Sonic Screwdriver">Sonic Screwdriver<br>
<input type="checkbox" name="products[]" value="Tricorder">Tricorder<br>
<input type="checkbox" name="products[]" value="ORAC AI">ORAC AI<br>
<input type="checkbox" name="products[]" value="HAL 2000">HAL 2000<br>

The selected values will still be accessible via the $_POST[products] variable, just as if they came from the multiple SELECT list in Listing 10.4.

    Team LiB
    Previous Section Next Section

    JavaScript Editor Javascript source editor     Web programming