When clicking on a select item, show input

Asked

Viewed 928 times

3

I want when I click the select "OTHER" to appear next to an input, but so far unsuccessful.

My code HTML and JS:

function mostraCampo( el )
{
 var outros = document.getElementById('outros'); 
  if (selectbasic.value == Outros) 
   outros.style.display = 'block';
  else 
   outros.style.display = 'none';
}
 <label class="col-md-3 control-label" for="selectbasic">Item: *</label>
  <div class="col-md-3">
    <select id="selectbasic" name="selectbasic" class="form-control">
      <option value="Banheiro">Banheiro</option>
      <option value="Rampa">Rampa</option>
	  <option value="Elevador">Elevador</option>
	  <option value="Vaga de Estacionamento">Vaga de Estacionamento</option>
	  <option value="Outros">Outros</option>	  
    </select>
  </div>
  
   <label class="col-md-3 control-label" for="textinput" style="display:none" >Outros:</label>  
  <div class="col-md-7">
	<input type="textinput" name="outros"  class="form-control input-md" style="display:none">  </div>
</div>

1 answer

1


You are confusing things. First that in your Function you are trying to get the input using the getElementById, and that for this to work you must add a idthe input or exchange the namefor id as I did. Another confusion is when you say: select "OTHER", the Other is a Select option and does not select it itself.

Explaining my code:

I used the event onchange which checks if you have selected an element in select and thiswithin the method mostraCampoto catch the current object.

If you still have any questions, leave us in the comments so I can edit my answer.

See working:

function mostraCampo( el )
{
  var inputOutros = document.getElementById('outros');
  if (el.value === 'Outros'){ 
   	  inputOutros.style.display = "block";
  }
  else {
      inputOutros.style.display = "none";
  }
}
 <label class="col-md-3 control-label" for="selectbasic">Item: *</label>
  <div class="col-md-3">
    <select id="selectbasic" onchange='mostraCampo(this)' name="selectbasic" class="form-control">
      <option value="Banheiro">Banheiro</option>
      <option value="Rampa">Rampa</option>
	  <option value="Elevador">Elevador</option>
	  <option value="Vaga de Estacionamento">Vaga de Estacionamento</option>
	  <option value="Outros">Outros</option>	  
    </select>
  </div>
  
   <label class="col-md-3 control-label" for="textinput" style="display:none" >Outros:</label>  
  <div class="col-md-7">
	<input type="textinput" id="outros" style='display:none' class="form-control input-md" >  </div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.