How to implement a select/text input combo

Question

Currently I have a dropdown (select) box like this:

<div class="fs-mobile-question">
    <label>Name:</label>
    <div>
      <select name="q1" class="form-control input-lg fs-task-input" style="width: 180px; display: inline;">
        {% for name in names %}
            <option value="{{ name }}">{{ names }}</option>
        {% endfor %}
      </select>
    </div>
</div>

What I would like to do is have an "Other" option in the drop down list. And when the user selects "Other", a text input field appears to type a custom name (it would be hidden by default). If something besides "Other" is selected, then the text input field disappears.

I understand I could use some jQuery magic here, but the reason I am asking this question is because I am modifying an existing application I want to make as few changes as possible and I'm looking for some ideas on how I can do that.

So if there was a way, for example, that I could give both the text input field and the select box the same name and prioritse how the POST data reads it (ie. use the text field if "Other" is selected) - I'd definitely be interested.

Thanks

Answer 1

In HTML5 the closest you're going to get built in without using JavaScript, is the datalist.

Adapted this example to your example - http://html5tutorial.info/html5-datalist.php :

<input id="q1" name="name" type="text" list="q1list"  class="form-control input-lg fs-task-input" style="width: 180px; display: inline;"/>
<datalist id="q1list">
        {% for name in names %}
            <option value="{{ name }}">
        {% endfor %}
</datalist>