Javascript - show TextField when select choice is

Question

I'm new in JavaScript and I have following issue.

In my HTML code is ordinary SELECT

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

I need to show TextFied under the SELECT only when user select choice Audi.

<input type="text" name="something">

What is the best way to do that?

Answer 1

Start using JQuery (JQuery).

Here is the javascript:

$(document).ready(function(){
    // On Select option changed
    $("#someId").change(function(){
        // Check if current value is "audi"
        if($(this).val() === "audi"){
            // Show input field
            $("#textInputId").show();   //This changes display to block
        }else{
            // Hide input field
            $("#textInputId").hide();
        }
    });
});

Here is the HTML

<select id="someId">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<input type="text" style="display:none;" id="textInputId" name="someName"/>

Here is the example on JSFiddle:

EXAMPLE

Answer 2

Do this:

<select id="select">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="hidden" id="txt" name="something">

And do something like this:

select.onchange=function(){
    if(select.value=="audi"){
       txt.type="text";    
    }
}

Demo:http://jsfiddle.net/943xQ/

Answer 3

you can achieve it easily using jquery like this:

here is the Html:

<select id="cars">
  <option value="-1">Select One</option>  
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

and text field:

<input type="text" name="something" id="txtCar" style="display:none;">

$('select#cars').change(function(){

if($(this).val() == "audi")
{
$('input#txtCar').show();
}

});

Here is the DEMO

Answer 4

Place this at the bottom of the page (provided you already have included jquery into this page):

<script>
$('select').change(function () {
  if ($(this).val() == 'audi') {
    $(this).parent().append('<input type="hidden" name="something">');
  }
});
</script>

Answer 5

You can attach the onchange event at select tag and can perform the action you want. Something like

HTML

<div id="result">
<select id="mySelect">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</div>

JS

var select = document.getElementById("mySelect");
select.addEventListener("change", function() { 
if(this.options[this.selectedIndex].value == 'audi'){
        var input = document.createElement('input');
        input.type="text";
        input.id="txt";
        input.name="something";

        document.getElementById('result').appendChild(input);
    }
});

DEMO

Answer 6

Given the posted HTML, in which you use no specific identifiers (class or id) to identify the relevant elements, and given that you've not specified the availability of any JavaScript library, I'd suggest the following 'plain' JavaScript solution:

function showInputWhen(evt,val){
    var el = evt.target;
    el.nextElementSibling.style.display = el.value.toLowerCase() == val.toLowerCase() ? 'inline-block' : 'none';
};

var selectEl = document.querySelector('select');

selectEl.addEventListener('change', function(e){
    showInputWhen(e,'audi');
});

JS Fiddle demo.

References:

• ChildNode.nextElementSibling ^{compatibility}.
• document.querySelector() ^{compatibility}.
• EventTarget.addEventListener() ^{compatibility}.