Personal Catalogue: PHP & MySQL — Chapter 4, Exercise 1
====================================================

TASK
Add the data-name attributes, the two label elements, and the
JavaScript from this chapter to your own add_item.php. Confirm
switching the dropdown between "book," "cd," and "dvd" correctly
updates both labels without a page reload.

SOLUTION

1. In the item-type <select>, give it id="item-type-select" and add
   data-name="<?= htmlspecialchars($type['name']) ?>" to each
   <option>, exactly as shown in the chapter.

2. Replace the plain "Creator:" and "Format detail:" <label> elements
   with:

       <label id="creator-label" for="creator-input">Creator:</label>
       <input type="text" name="creator" id="creator-input">

       <label id="format-label" for="format-input">Format detail:</label>
       <input type="text" name="format_detail" id="format-input">

3. Add the two json_encode()-built label maps and the updateLabels()
   script from the chapter just before the closing </body> tag.

To confirm it works: open add_item.php in a browser with the page's
developer tools open (no need to reload anything). Initially the
labels read "Creator:" and "Format detail:" (the fallback text, since
nothing is selected yet). Selecting "book" from the dropdown should
immediately change the labels to "Author:" and "Binding (hardcover /
paperback):" with no page reload — visible instantly because the
JavaScript event listener fires on the 'change' event. Selecting "cd"
next should change them to "Artist:" and "Release type (single /
album):", and "dvd" to "Director:" and "Region code:".

A quick way to confirm no reload happened: type something into the
Title field first, then switch the dropdown — if the typed text is
still there afterward, the page never reloaded (a real page reload
would have cleared the unsaved input).

WHY THIS WORKS AS AN ANSWER
----------------------------
It verifies the behavior the chapter's own JavaScript is actually
supposed to produce (instant label changes, no reload) with a concrete
test (typed text survives the dropdown change) rather than just
confirming the labels visually change, which could happen even with a
full page reload if the server also rendered different default text.