How to display a hidden CSS select using Javascript

Asked

Viewed 727 times

4

I have a contact form on a decoration site, except I’m looking to perfect it by putting a select only hidden,

Example, my request form, Name, E-mail, Telephone Area Code, Event Date and Decoration Theme,

But I would put a category for this example decoration, the person selects decoration for baby shower, after she click on that theme would appear a select below 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;
}
javascript html form

  • if you can do so, it would not be better to do with a textbox if you selected this option for baby shower?

  • Then it would be feasible but not all customers would end up writing the category of the theme rs.

  • let me get this straight, ex: you have a select and after selecting the baby shower option, you want another select to appear with the three options, Girl, Boy or Revelation, would that be it ?

  • Exactly Brother ! Sorry the delay of the answer is that I had connection problems

2 answers

4


You can use the data-section you already have in HTML to know if the chosen option is the chabebeThat’s what 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 who registers when select changes and give a CSS class:

.mostrar {
    display: block !important;
}

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

An example would be 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: http://jsfiddle.net/5pstkuk0/

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 here ['infantil', 'casamento', 'chabebe'] for the thing to work.

jsFiddle: http://jsfiddle.net/5pstkuk0/6

  • It was great, thank you so much for your attention and for your help!

0

If I may use Jquery, I think it works that way:

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

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

Browser other questions tagged javascript html form

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