How to display a hidden select in CSS using Javascript

Navigation
4

I have a contact form on a decoration website, but I want to perfect it by putting a select more only hidden,

Example, my form asks for, Name, Email, Telephone DDD, Event Date and Decoration Theme,

But I would like to put a category for this decoration example, the person selects decoration for baby shower, after clicking on that theme would appear a select down asking if the theme is for Girl, Boy or Revelation.

Form: 

          <form action="envia.php" method="post" id="form1">
            <input type="text" name="nome" id="nome" class="name" value="Nome" onFocus="if(this.value =='Nome' ) this.value=''" onBlur="if(this.value=='') this.value='Nome'">
            <input type="text" name="email" id="email" class="email" value="Email" onFocus="if(this.value =='Email' ) this.value=''" onBlur="if(this.value=='') this.value='Email'">
            <input type="text" name="ddd" id="ddd" class="ddd" value="DDD" onFocus="if(this.value =='DDD' ) this.value=''" onBlur="if(this.value=='') this.value='DDD'" maxlength="3">
            <input type="text" name="telefone" id="telefone" class="telefone" value="Telefone" onFocus="if(this.value =='Telefone' ) this.value=''" onBlur="if(this.value=='') this.value='Telefone'" maxlength="9">
            <p></p>
            <p><strong>Escolha a Data do Evento:</strong></p>
            <select name="dia" id="dia" class="dia">
              <option selected value="Dia">Dia</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
              <option value="16">16</option>
              <option value="17">17</option>
              <option value="18">18</option>
              <option value="19">19</option>
              <option value="20">20</option>
              <option value="21">21</option>
              <option value="22">22</option>
              <option value="23">23</option>
              <option value="24">24</option>
              <option value="25">25</option>
              <option value="26">26</option>
              <option value="27">27</option>
              <option value="28">28</option>
              <option value="29">29</option>
              <option value="30">30</option>
              <option value="31">31</option>
            </select>
            <select name="mes" id="mes" class="mes">
              <option selected value="Mês">Mês</option>
              <option value="1">Janeiro</option>
              <option value="2">Fevereiro</option>
              <option value="3">Março</option>
              <option value="4">Abril</option>
              <option value="5">Maio</option>
              <option value="6">Junho</option>
              <option value="7">Julho</option>
              <option value="8">Agosto</option>
              <option value="9">Setembro</option>
              <option value="10">Outubro</option>
              <option value="11">Novembro</option>
              <option value="12">Dezembro</option>
            </select>
            <select name="ano" id="ano" class="ano">
              <option selected value="Ano">Ano</option>
              <option value="2015">2015</option>
              <option value="2016">2016</option>
              <option value="2017">2017</option>
              <option value="2018">2018</option>
              <option value="2019">2019</option>
              <option value="2020">2020</option>
            </select>
            <p></p>
            <p><strong>Escolha um Tema:</strong></p>
            <select name="temas" id="temas" class="temas">
              <option selected value="Temas Disponíveis">Temas Disponíveis</option>
              <option data-section="infantil" value="Decoração Festa Infantil">Decoração Festa Infantil</option>
              <option value="Decoração Festa 15 Anos">Decoração Festa 15 Anos</option>
              <option value="Decoração Para Noivado">Decoração Para Noivado</option>
              <option data-section="casamento" value="Decoração Para Casamento">Decoração Para Casamento</option>
              <option value="Decoração Para Bodas">Decoração Para Bodas</option>
              <option data-section="chabebe" value="Decoração Para Chá de Bebê">Decoração Para Chá de Bebê</option>
              <option value="Decoração Para Chá de Cozinha">Decoração Para Chá de Cozinha</option>
              <option value="Decoração Para Chá de Lingerie">Decoração Para Chá de Lingerie</option>
              <option value="Decoração Para Formatura">Decoração Para Formatura</option>
              <option value="Decoração Para Eventos">Decoração Para Eventos</option>
            </select>
            <p></p>
            <div data-name="infantil" class="hide">
              <select name="infantil" id="infantil" class="infantil">
                <option value="Decoração Minnie Vermelha">Decoração Minnie Vermelha</option>
                <option value="Decoração Minnie Rosa">Decoração Minnie Rosa</option>
                <option value="Decoração Frozen">Decoração Frozen</option>
              </select>
            </div>
            <p></p>
            <div data-name="casamento" class="hide">
              <select name="casamento" id="casamento" class="casamento">
                <option value="Decoração Mesa Provençal de Casamento">Decoração Minnie Vermelha</option>
                <option value="Decoração Corredor de Cerimônia">Decoração Corredor de Cerimônia</option>
                <option value="Decoração Mesa Provençal e Corredor de Cerimônia">Decoração Mesa Provençal e Corredor de Cerimônia</option>
              </select>
            </div>
            <p></p>
            <div data-name="chabebe" class="hide">
              <select name="chabebe" id="chabebe" class="chabebe">
                <option value="Decoração Chá de Bebê Menina">Decoração Chá de Bebê Menina</option>
                <option value="Decoração Chá de Bebê Menino">Decoração Chá de Bebê Menino</option>
                <option value="Decoração Chá de Bebê Revelação">Decoração Chá de Bebê Revelação</option>
              </select>
            </div>
            <p></p>
            <label class="message"><textarea name="mensagem" id="mensagem" onFocus="if(this.value =='Mensagem' ) this.value=''" onBlur="if(this.value=='') this.value='Mensagem'">Mensagem</textarea></label>
              <div class="clear"></div>
              <div class="btns">
              <input type="submit" value="ENVIAR" class="btn" onclick="return validaform(form1)" />
                <div class="clear"></div>
              </div>
            </form>

JS: 

function validaform(form1){
if(form1.nome.value == 'Nome'){
    alert("O Campo Nome é Obrigatório!");
    return false;
}
if(form1.email.value == 'Email'){
    alert("O Campo Email é Obrigatório!");
    return false;
}
if(form1.email.value.indexOf(('@' && '.'),0)== -1){
    alert("Email Inválido.");
    return false;
}
if(form1.ddd.value == 'DDD'){
    alert("O Campo DDD é Obrigatório!");
    return false;
}
if (isNaN(form1.ddd.value)){
    alert ("O Campo DDD Deve Conter Apenas Números!");
    form1.ddd.focus();
    return false;
}
if(form1.telefone.value == 'Telefone'){
    alert("O Campo Telefone é Obrigatório!");
    return false;
}
if (isNaN(form1.telefone.value)){
    alert ("O Campo Telefone Deve Conter Apenas Números!");
    form1.telefone.focus();
    return false;
}
if(form1.dia.value == 'Dia'){
    alert("O Campo Dia é Obrigatório!");
    return false;
}
if(form1.mes.value == 'Mês'){
    alert("O Campo Mês é Obrigatório!");
    return false;
}
if(form1.ano.value == 'Ano'){
    alert("O Campo Ano é Obrigatório!");
    return false;
}
if(form1.temas.value == 'Temas Disponíveis'){
    alert("O Campo Temas Disponíveis é Obrigatório!");
    return false;
}
return true;
}
    
asked by anonymous 12.08.2015 / 22:13

2 answers

4

You can use the data-section you already have in HTML to know if the option chosen is chabebe For this you can use this.options[this.selectedIndex] to know which option is chosen and .dataset.section to capture this data-

Then join an event observer to register when the select changes and gives you a CSS class: 

.mostrar {
    display: block !important;
}

I want to show this div that is hidden in HTML (I saw that you already have the class hide ).

An example would look like this: 

var selectTemas = document.getElementById('temas');
var divChabebe = document.querySelector('div[data-name="chabebe"]');
selectTemas.addEventListener('change', function () {
    var escolhido = this.options[this.selectedIndex].dataset.section;
    divChabebe.classList[escolhido == 'chabebe' ? 'add' : 'remove']('mostrar');
});

jsFiddle: link

And adapting to be scalable would be: 

var selectTemas = document.getElementById('temas');
var escondidos = ['infantil', 'casamento', 'chabebe'].map(function (dataName) {
    return document.querySelector('div[data-name="' + dataName + '"]')
});
selectTemas.addEventListener('change', function () {
    var escolhido = this.options[this.selectedIndex].dataset.section;
    escondidos.forEach(function (select) {
        select.classList[escolhido == select.dataset.name ? 'add' : 'remove']('mostrar');
    });
});

And in JS you only have to add / remove ['infantil', 'casamento', 'chabebe'] here for the thing to work.

jsFiddle: link

    
12.08.2015 / 22:44
0

If you can use JQuery , I think it works like this: 

$('#temas').change(function () {
  if($('#temas option:selected').val() == 'infantil') {
    $('#infantil').show();
  }
});

And would put id="infantil" , select and value="infantil" in the option.

    
12.08.2015 / 22:43
Doubt with global variable in a controller How do I add or subtract a digit in the TextBox with a button?