How do I show the label name and the input name 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>
<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>
Here is an example of one of the possible ways to hide / display label and 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><selectid="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>If you're looking to reactivate your application, I'd advise you to learn about Vue.JS , see an example of what you're 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><divid="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>