This small chapter is about using HTML select element. This element has
three faces in HTML. You often encounter it as simple drop-down list and less often as select list and rarely
as select list with multiple options:
Select element is used often to pick values of entity in many-to-one
relation to entity of record which is being edited (e.g. person’s address, type of contact, type of relationship, …).
Here is a list of possible select element variants:
Classic select - drop down
Select list – multiple
The concept behind this type of form input is that you select one (or more) options and their value attribute is
transmitted to server’s backend named according to value of name attribute attached to parent select. If the
option element lacks value attribute, the browser simply sends its contents (visible text).
That hidden value is very important because you can have different representation of entry for the user (e.g. textual)
and for your code (e.g. ID of some database entry).
Groups of radio buttons and checkboxes
work similarly, except that you have to give each of them samename attribute and textual representation is
carried out by label element.
See those squared brackets in third example? They tell the backend to interpret incoming data as array (you can even
specify keys for that array in template’s code). Always pass values from multiple selects/checkboxes as array.
You can read more about this approach in another walkthrough article.
Radio buttons are like drop-down lists, they allow only one checked value – no need for squared brackets.
Task – use select element to update or erase person’s address.
Load all locations from database into select element options and use the value attribute for id_location.
Now prepare your script to receive id parameter which will represent ID of a person. Find one person in
database and print his name. Remember to pass ID of person along with new ID of his new address – you will need both
in UPDATE query.
To test your page, find some person in a database and type URL like set-address?id=XXX
into browser’s address bar. Or you can prepare a link to this form from list of persons.
Almost there – preselect address of a person if he has one and tell the form where to send data:
Now create the update script which will handle form submission – it will receive ID of person and ID of his new
address (or empty string if you choose Unknown address option). Redirect back to person address selection form
Notice that I used a different way to pass ID of person to the script in hidden form field. This means, that the
ID of a person is not visible in URL after form submit and you can find it in POST data using getParsedBody()
method. Other way is to append the ID to action attribute of the form as in previous article about
Finally done. Take a look into your browser’s developer tools (F12) and observe what the browser sends when you
select different location IDs. Also note HTTP methods and immediate redirection
after update script:
Because this is quite small piece of functionality, try to incorporate this script into person update module.
Just to be complete: to group select element options use optgroup tag:
This walkthrough chapter should help you to understand name-value concept of select element which is not that clear
at first sight as with simple text inputs. You can try to use multiple select element and update some M:N cardinality
relationship like persons attending a meeting. This leads to passing arrays chapter.
New Concepts and Terms
Is a multi-select any different to multiple checkboxes?