The best way is one that doesn’t require scripting to be available. When scripting is available we can then use that to make the experience a bit nicer for the user.
Start by having an input field just below the select one, to accept any other input:
<select name="Title" id="Title" class="cat_dropdown_smaller">
<option value="913142">DR</option>
<option value="913141">MISS</option>
<option value="913138" selected="selected">MR</option>
<option value="913139">MRS</option>
<option value="913140">MS</option>
<option value="other">Other</option>
</select>
<input name="otherTitle">
The above code is all ready to be used now. The server-side script that accepts the form can check if the other option is selected, and if it is then it can pay attention to the input field instead.
Notice how the input field is called otherTitle. If we have another select field called Relationship, that might have an other option too with a text field called otherRelationship.
By using the same consistent pattern for naming the other input field, we can easily use the same scripting code to handle different situations.
jQuery is not mandatory for doing this sort of work either - basic JavaScript can be used to easily do what we want to achieve.
When you hide the other input field, it’s best to use CSS to do that:
.hidden {
display: none;
}
What we want to do with the scripting is quite easy to explain. When a select element is changed, we want to check if the selected option is the “other” one. If it is, reveal the other input field - otherwise leave it hidden.
An important aspect is to place the scripting at the end of the body, which will make it easier to interact with elements on the page while it’s loading.
We can use the onchange event to trigger the work we want to get done.
document.querySelector('select[name="Title"]').onchange = function () {
...
};
We can now create a small function, that will be run whenever the onchange event occurs, that checks if the other field needs to be shown.
var otherFieldHandler = function() {
var otherInput = document.querySelector('[name="other' + this.name + '"]');
if (this.options[this.selectedIndex].value === 'other') {
otherInput.classList.remove('hidden');
} else {
otherInput.classList.add('hidden');
}
};
document.querySelector('select[name="Title"]').onchange = otherFieldHandler;
You can see the above in action at http://codepen.io/pmw57/pen/xBdeA
and lastly we can trigger that event too, which will cause the other input to initially be hidden.
var selectTitle = document.querySelector('select[name="Title"]');
selectTitle.onchange = otherFieldHandler;
selectTitle.onchange();
We can even search the page for all select fields, and attach the otherFieldHandler on to each of them.
var otherFieldHandler = function() {
var otherInput = document.querySelector('[name="other' + this.name + '"]');
if (this.options[this.selectedIndex].value !== 'other') {
otherInput.classList.add('hidden');
} else {
otherInput.classList.remove('hidden');
}
},
selects = document.querySelectorAll('select'),
i;
for (i = 0; i < selects.length; i += 1) {
selects[i].onchange = otherFieldHandler;
selects[i].onchange();
}
You can see the above code in action at http://codepen.io/pmw57/pen/xBdeA/
