4

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/

xxx
  • 1,153
  • 1
  • 11
  • 23
Ryan Salmons
  • 1,429
  • 10
  • 21
  • 42

3 Answers3

10

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

Ishan Jain
  • 8,063
  • 9
  • 48
  • 75
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.

Goran.it
  • 5,991
  • 2
  • 23
  • 25
  • What happens when I need to store the value? 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. – Dre_Dre Dec 08 '15 at 23:54
  • You can just use the input field for post, basically ad a name to and inside the check function change it's value to selected option - or set it to empty string if "other" is selected. – Goran.it Feb 12 '16 at 12:31
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!

theftprevention
  • 5,083
  • 3
  • 18
  • 31
  • I was going to post a very similar answer. It's on this fiddle: http://jsfiddle.net/rynslmns/CxhGG/1/ – Victoria Ruiz Jan 30 '14 at 22:22
  • you might as well do $("#choose").change( since its a shortcut for $("#choose").on("change", http://api.jquery.com/change/ – mcolo Jan 30 '14 at 22:23
  • `.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. – theftprevention Jan 31 '14 at 16:32