Show input when user selects option

Asked

Viewed 1,667 times

2

How do I show the name label and the name input only when the user selects the inactive option?

  <div>
  <label>Status</label>
  <select name="status">
  <option value="Ativo">Ativo</option>
  <option value="Inativo">Inativo</option>  
  </select>               
  </div>

  <div>
  <label>Nome</label>
  <input type="text" name="nome">
  </div>
javascript html

  • What you’ve done so far?

3 answers

2

The following is an example of one of the possible ways to hide/display the label and the input according to the option selected by the user:

$('#status').change(function(){
  var valor = $('#status').val();
  if (valor == "Inativo"){
    $('#nome').show();
  }
  else {
    $('#nome').hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label>Status</label>
  <select id="status" name="status">
  <option value="Ativo">Ativo</option>
  <option value="Inativo">Inativo</option>  
  </select><br><br>               
</div>
  <div id="nome" style='display:none;'>
  <label>Nome</label>
  <input id="nome" type="text" name="nome" >
  </div>

2


<script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>

<div>
  <label>Status</label>
  <select id="status" name="status">
  <option value="Ativo">Ativo</option>
  <option value="Inativo">Inativo</option>  
  </select>               
  </div>

  <div id="nome" style="display:none;">
  <label>Nome</label>
  <input type="text" name="nome">
  </div>
</div>  

<script>
 $("#status").change(function() {
    $('#nome').hide();
    if(this.value == "Inativo")
      $('#nome').show();

 });
</script>

  • if the inactive was the first option of the option just by clicking on active and then returning to inactive that will appear the label?

  • If you want to do this, just remove the display:NONE a div de id="name"

  • Man it was worth, now it’s top

1

If you are looking to give reactivity to your application, I advise you to learn about Vue.JS, see an example of what you are looking for:

Vue.component('my-form', {
  data: function () {
    return {
      form: {
        status: 'inativo',
        nome: 'Vue.js Rules!!'
      }
    }
  }
});

new Vue({
  el: "#app"
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="app">
  <my-form inline-template>
    
    <div class="box">
      <div class="field">
        <label class="label">Status</label>
        <select name="status" class="control" v-model="form.status">
          <option value="ativo">Ativo</option>
          <option value="inativo">Inativo</option>  
        </select>               
      </div>

      <div class="field" v-if="form.status == 'ativo'">
        <label class="label">Nome</label>
        <input type="text" name="nome" class="control" v-model="form.nome">
      </div>
    </div>
    
  </my-form>
</div>

Browser other questions tagged javascript html

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