CODEWITHSUNDEEP
htmlformshtml-select
Budove
Budove

Reputation: 403

HTML Dropdown list with user input field

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!

Upvotes: 3

Views: 76006

Answers (5)

user1626664
user1626664

Reputation: 313

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"/>

Upvotes: 4

Damian SIlvera
Damian SIlvera

Reputation: 866

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/

Upvotes: 1

Cody
Cody

Reputation: 401

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.

Upvotes: 0

jtheman
jtheman

Reputation: 7491

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" />

Upvotes: 1

Musa
Musa

Reputation: 97672

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

Upvotes: 0

Related Questions