forms-with-array-inputs
grouping web-inputs into arrays
and, GET v. POST

grouping inputs into a single array

What if we have several different inputs which are grouped together? For example, in addition to asking about favorite colors and quests, you have several inputs all about a mailing-address (street, city, state, and zip). We could have the handler receive each input separately:

array( "favorite-color" => "orange"
     , "quest" => "cookies"
     , "street" => "800 E. Main St"        // }
     , "city" => "Radford"                 // } unsatisfying to not have
     , "state" => "VA"                     // } these four grouped more closely
     , "zip" => "24121"                    // }
     , "is-happy" => "yep"
     );

But clearly, this is unsatisfying: the four inputs for street, city, state, and zip are closely related in a way that the other inputs aren't. We know from programming, that we'd like to have all the address-information grouped into its own object/array:

array( "favorite-color" => "orange"
     , "quest" => "cookies"
     , "address" => array( "street" => "800 E. Main St"        // }
                            , "city" => "Radford"              // } Much better! The address
                            , "state" => "VA"                  // } is now a single object!
                            , "zip" => "24121"                 // }
                            )
     , "is-happy" => "yep"
     );

In intro programming, this is the same notion of an object, one of whose fields happens to be another object. (An array containing an array is the natural, proper representation.)

Happily, we can achieve this! If an input tag's name attribute contains square-brackets, a (sub) array is created inside $_POST, exactly like we want:

… <input type='text'     name='favorite-color'/>
… <input type='text'     name='quest'/>
… <input type='text'     name='address[street]'/>
… <input type='text'     name='address[city]'/>
… <input type='text'     name='address[state]'/>
… <input type='text'     name='address[zip]'/>
… <input type='checkbox' name='is-happy' value='yep'/>

In our form-handler, $_POST['address'] is now an entire sub-array. So we can pull out elements of that array by following it with square-brackets: $_POST['address']['zip']. Some people also prefer to pull out the sub-array and put it into its own variable, though that's not strictly necessary:

              echo "favorite color is ", $_POST['favorite-color'], "\n";
              echo "the address's zip is ", $_POST['address']['zip'], "\n";
              // Or, we can make a new variable to hold just the sub-array:
              $address = $_POST['address'];
              echo "the address's city is ", $address['city'], "\n";

pro tip: If you do want to grab a value from an array and stick it in a variable (rather than just typing out the array-and-index every time you want to use it), do yourself a favor and make the variable-name the same as the index-name:
                $faveCol  = $_POST['favorite-color];  // ACK this way lies madness
                $is_happy = $_POST['is-happy'];       // Good — parallel naming reduces mental overhead
              

The only thing to note is a slight discrepency in quote-marks, in the html source (no quotes inside the square-brackets), and the PHP code accessing an array-index (where you do put quotes inside the square-brackets ¹).

GET vs POST

Video: GET vs POST (11m16s) GET & POST methods

Q: But how is information communicated from a web form (pure html) to a php program?
A: When you click 'submit', the HTML makes a page-request to the page specified by the form's "action" attribute. (Presumably it's a php page.) The page-request incudes extra information about what html input fields had been selected, etc., as part of the http request. The server gets that request and invokes the php file as normal, but it also pre-initializes an array of values for the program — and it fills that array with the extra information contained in the page-request.

GET — form data is sent to the server appended to the server script URL
In the server script, data is retrieved via the superglobal associative array $_GET.
POST — form data is embedded in the http request header
Server script - $_POST

When to use which?:

GET requests can be bookmarked;
GET requests should be idempotent — that is, fetching the same request twice should be the same as getting it once. Even better, they should have no side-effects ² ³.
So if your form causes a bank transfer to happen, or adds something to the user's shopping-cart, or updates a database, then GET is probably not appropriate.
POST requests are more secure against casual looking over the shoulder (but still entirely vulnerable to packet sniffing etc.).
When refreshing a page created via POST, browsers tend to respond: “Refreshing will cause the page to re-submit; do you really want to do this?”
Possible guideline (?): If the page is changing a database's contents, use POST.
Many people suggest using POST as default.
Explore: How does a newspaper handle it? nytimes. Discuss: When might you choose to use post/get vs. having a separate URL for each result, e.g. different xkcd strips.

takeaways

Submitting a form is just requesting a new page, except the http packet includes the form-info.
The server runs the requested php program, but first it takes any form-info from the http-packet and kindly places it into the array _POST, for the program's use.
Back in the form's html, the name attribute is used as the array-key, and the value attribute is used as the corresponding value in the array.

Best practice: when including a name attribute, let your finger-reflexes add the id with the same value (except for radio-buttons, where the same name is shared among multiple tags).

It's not so much that you always need both name and id, but it's not uncommon, and you should really name them the same thing. (This page made them slightly different, just so you could see the difference, and understand which is used where).
In your php, if you pull something from $_POST into a variable for convenience, name your variable the same as the name/index. Just for your sanity.
In your php form, use array_key_exists (or similar) to make sure the input was provided (not left blank by the user).
The file containing the web-form and the file containing the handler should be consistently named. For example, for entering customer-info, I suggest ⁴ “customer-info-form.html” and “customer-info-handle.php”.

video from distance lecture (breeze), 2017-feb-07 (1h42m), REVIEWING this info

¹ Well, admittedly: PHP, in its awfulness, will interpret text-without-quotes as a string, so it would actually work to look up an array-index without putting quote-marks inside the square brackets. But that's CRAZY. Put quotes around string-constants, like we do in every other language on the planet (at least, if you want full points, in this course). ↩

² Idempotent is not quite the same as having-no-side-effect: For example, if you add-to-shopping-cart-unless-item-already-there, you can change state, but still be idempotent. ↩

³ Well, “irrelevant” state-change is okay: you can update log files and update cookie-timestamps, w/o violating the spirit of a GET request. ↩

⁴ And later, when we talk about sticky-forms, I'll suggest “customer-info-edit.html” which requires either …-form or …-handle. ↩

home—lects—hws
D2L—breeze (snow day)

©2017, Ian Barland, Radford University
Last modified 2017.Sep.25 (Mon) Please mail any suggestions
(incl. typos, broken links)
to ibarlandradford.edu

forms-with-array-inputs grouping web-inputs into arraysand, GET v. POST

grouping inputs into a single array

GET vs POST

takeaways

forms-with-array-inputs
grouping web-inputs into arrays
and, GET v. POST