Add input-box when selecting a specific option into select drop down

Question

I need to add input to a select option when it is selected. Whenever the user selects 'other' an input box is there for the user to enter in data.

HTML:

<select>
  <option>Choose Your Name</option>
  <option>Frank</option>
  <option>George</option>
  <option>Other</option>
</select>

<!-- when other is selected add input
<label>Enter your Name
<input></input>
</label> -->

My jsfiddle: http://jsfiddle.net/rynslmns/CxhGG/1/

Solution 1

You can use jquery .change() to bind change event of an element.

Try this one:

HTML

<select>
  <option>Choose Your Name</option>
  <option>Frank</option>
  <option>George</option>
  <option>Other</option>
</select>
<label style="display:none;">Enter your Name
<input></input>
</label>

Jquery

$('select').change(function(){
     if($('select option:selected').text() == "Other"){
        $('label').show();
     }
     else{
        $('label').hide();
     }
 });

Try in Fiddle

Updated:

You can also add an input-box dynamically -

HTML

<select>
  <option>Choose Your Name</option>
  <option>Frank</option>
  <option>George</option>
  <option>Other</option>
</select>

Jquery

$('select').change(function(){
   if($('select option:selected').text() == "Other"){
        $('html select').after("<label>Enter your Name<input></input></label>");
   }
   else{
        $('label').remove();
   }
});

Try in Fiddle

Solution 2

See it in action here.

HTML:

<select id="choose">
    <option>Choose Your Name</option>
    <option>Frank</option>
    <option>George</option>
    <option value="other">Other</option>
</select>
<label id="otherName">Enter your Name
    <input type="text" name="othername" />
</label>

jQuery:

$(document).ready(function() {
    $("#choose").on("change", function() {
        if ($(this).val() === "other") {
            $("#otherName").show();
        }
        else {
            $("#otherName").hide();
        }
    });
});

Note the value="other" attribute on the "Other" option. That's how the script determines if the "Other" option is selected.

Hope this helps!

Solution 3

Here is a pure javascript version, no jQuery needed:

<script>
// Put this script in header or above select element
    function check(elem) {
        // use one of possible conditions
        // if (elem.value == 'Other')
        if (elem.selectedIndex == 3) {
            document.getElementById("other-div").style.display = 'block';
        } else {
            document.getElementById("other-div").style.display = 'none';
        }
    }
</script>

<select id="mySelect" onChange="check(this);">
        <option>Choose Your Name</option>
        <option>Frank</option>
        <option>George</option>
        <option>Other</option>
</select>
<div id="other-div" style="display:none;">
        <label>Enter your Name
        <input id="other-input"></input>
        </label>
</div>

jsFidle

As stated before, add onChange event, link it to function and there process what should be displayed etc.

Comments

[Victoria Ruiz]

I was going to post a very similar answer. It's on this fiddle: jsfiddle.net/rynslmns/CxhGG/1

[mcolo]

you might as well do $("#choose").change( since its a shortcut for $("#choose").on("change", api.jquery.com/change

[theftprevention]

.change() works, yes, but can't be expanded to accommodate event namespaces, if you should choose to implement them. I guess I also just use .on() out of habit, hahah.

[Dre_Dre]

What happens when I need to store the value? <input type="text" name="othername" /> Where is name specified for post purposes? It would be ideal to use the same "name" whether the user enters data manually or selects an option.

[Goran.it]

You can just use the input field for post, basically ad a name to <input> and inside the check function change it's value to selected option - or set it to empty string if "other" is selected.