Even after 30 years of HTML, I learn new things about it.
This Monday morning, I woke up to a mail from Sundeep saying requests for a Data Engineer - AWS/Azure/GCP in our internal fulfilment portal raised an error.
My guess was one of these:
- The “/” in the role is causing a problem. (Developer mistake.)
- The role exists in one table but not the other. (Recruitment team mistake.)
- The application wasn’t set up / restarted properly. (IT mistake.)
All three were wrong. So I dug deeper.
The role was defined as Data Engineer - AWS/Azure/GCP (note the 2 spaces before the hyphen). But the form kept sending Data Engineer - AWS/Azure/GCP (spaces were condensed).
I swear there was NOTHING in the code that changes the options. The relevant line just picked up the role and rendered it inside the <select>:
“`html
<option>{{ row['Role'] }}</option>I used the browser’s developer tools to inspect the `<select>` element. It showed the options with the 2 spaces:
<option>Data Engineer - AWS/Azure/GCP</option>But, when I selected it and printed the value, it had only one space.
> console.log(document.querySelector("#role").value
'Data Engineer - AWS/Azure/GCP'That’s when it hit me. HTML condenses whitespaces.
Till date, I only ever used <option value=""> when specifying a value different from what’s displayed. I never thought of using it to preserve the value.
LESSON: If you’re dynamically generating <option>s, ALWAYS use value= with the same value as the text.