HTML Dropdown list with user input field

Question

I have a dropdown list as follows..

<select name="school"><option value="None" selected>None</option>
<option value="DeSoto">DeSoto</option>
<option value="Hillsboro">Hillsboro</option>
<option value="Grandview">Grandview</option>
<option value="Festus">Festus</option>
<option value="R-7">R-7</option>
<option value="Home-Schooled">Home-Schooled</option>

If the contact being entered in the database happens to live in a school district not listed in the dropdown list, the data entry person would have to add a school to the database. How can I add a selection to the end of the list that would allow the end user to enter a school name.

I can handle the PHP code to process the entry, I just need some ideas on how to accomplish either turning the dropdown list into a user input field, or some other solution. Thanks for the help!

Lots of ways to do it, none are simple, depends on your needs. Most solutions consist of not using a <select> , but a regular input field that displays a custom made popup when you click inside. — Ruan Mendes
– Ruan Mendes, Commented Aug 31, 2012 at 23:26

Silvan · Accepted Answer · 2016-09-21 10:59:25Z

4

You can use a combo box : Input+Dropdown list.

http://javascript.about.com/library/blcombo.htm

Demo: http://jsfiddle.net/P39W5/

OR you can dynamically add a input box:

http://jsfiddle.net/EMEVL/

JS:

$(document).ready(function() {
    $('#newSchool').hide();
    $("#schoolContainer").change(function() {
        var val = $(this).val();      
        if (val == 'Other School') {
            $('#newSchool').show();
        } else {
            $('#newSchool').hide();
        }
    }).change();
});

HTML:

School: <select name="school" id="schoolContainer">
    <option value="None" selected>None</option>
    <option value="DeSoto">DeSoto</option>
    <option value="Hillsboro">Hillsboro</option>
    <option value="Grandview">Grandview</option>
    <option value="Festus">Festus</option>
    <option value="R-7">R-7</option>
    <option value="Home-Schooled">Home-Schooled</option>
    <option value="Other School">Other School</option>
</select>

    <input type="text" id="newSchool"/>
    <input type="button" id="otherschool" value="Insert"/>

edited Sep 21, 2016 at 10:59

Silvan

1564 silver badges14 bronze badges

answered Aug 31, 2012 at 23:18

user1626664

3131 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nicolai Dutka Over a year ago

I LOVE the first jsfiddle solution but could not get it to work... Error with: self.ul = self.inp.nextSibling; - Unable to get property 'nextSibling' of undefined or null reference

Silvan Over a year ago

This works great for me and should be the right answer to this question.

TylerH · Accepted Answer · 2015-09-09 20:27:29Z

1

Here its something like that:

$(document).ready(function(){

    $("#addSchool").click(function(){
    $("#schoolContainer").append('<option value="' + $("#newSchool").val() + '">' + $("#newSchool").val() + '</option>');
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select name="school" id="schoolContainer">
    <option value="None" selected>None</option>
    <option value="DeSoto">DeSoto</option>
    <option value="Hillsboro">Hillsboro</option>
    <option value="Grandview">Grandview</option>
    <option value="Festus">Festus</option>
    <option value="R-7">R-7</option>
    <option value="Home-Schooled">Home-Schooled</option>
</select>
    
    <input type="text" id="newSchool"/>
    <input type="button" id="addSchool" value="Insert"/>

http://jsfiddle.net/damian_silvera/NcpKp/

edited Sep 9, 2015 at 20:27

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Aug 31, 2012 at 23:26

Damian SIlvera

8661 gold badge9 silver badges19 bronze badges

4 Comments

Ruan Mendes Over a year ago

Need some explanation, the jsfiddle adds options to the select, which is not what the OP wants

Damian SIlvera Over a year ago

The ajax call to insert data inside database must be inside the click function (before or after the append) but the code in the .php file can be implemented in many different ways, thats why i didn't explain nothing about it...

Ruan Mendes Over a year ago

Sounds like the OP wants to be able to free text into the field if the option is not in the drop down. Adding it to the list in the dropdown would be done on the server and would only show up after the page was reloaded.

Budove Over a year ago

This actually works well. Thank you. I've applied this to my application and I think this will suit my needs without requiring me to write a bunch of code to add a new school to the database when it's entered in a text box. This way I can keep the most used schools in the dropdown, and on the occasion that a new school has to be used the data entry person can input that field and add it to the dropdown as necessary.

jtheman · Accepted Answer · 2012-08-31 23:16:53Z

1

jQuery helps:

$("select[name='school']").change(function() {
    var val = $(this).val();
    if(val == 'notlisted') {
        $('input[name="otherschool"]').show();
    } else {
        $('input[name="otherschool"]').hide();
    }
}).change();

and then in HTML

<input type="text" name="otherschool" style="display:none" />

answered Aug 31, 2012 at 23:16

jtheman

7,5013 gold badges32 silver badges40 bronze badges

Comments

Musa · Accepted Answer · 2012-08-31 23:16:17Z

0

Add another <option> field with value other, when the user selects it they are allowed to enter the school name in an input box.

answered Aug 31, 2012 at 23:16

Musa

97.9k17 gold badges123 silver badges144 bronze badges

2 Comments

Budove Over a year ago

That will do nothing but pass "Other" to the $_POST variable.

Musa Over a year ago

@user1628741 then you will know to check the provided input field for the school.

Cody · Accepted Answer · 2012-08-31 23:17:07Z

0

Why not have an add button next to this drop down? It doesn't seem intuitive to have the entry at the end of a drop down. As a user I my not even expand the drop down just scroll through the current values.

answered Aug 31, 2012 at 23:17

Cody

4011 gold badge5 silver badges8 bronze badges

2 Comments

Budove Over a year ago

I actually considered that. I could put the add button next to the dropdown and embed it in the page with an iframe. But then the page would have to be reloaded to repopulate the dropdown list and any changes in the total form would be lost.

jtheman Over a year ago

Use js to show/hide the dropdown/fields instead... Simpler and more efficient (see my example even if this is not exa tly what you want)

Collectives™ on Stack Overflow

HTML Dropdown list with user input field

5 Answers 5

2 Comments

4 Comments

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

4 Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related