select brings up input and select fields

Asked

Viewed 48 times

-1

Staff need that the field of imput appears and the field select with the status when the user selects your area of action if he selects Academic, Other or I’m not from Areá da Saúde not appear that was that I got so far someone can help me

                    <span class="input-group-addon"><i class="glyphicon glyphicon-book"></i></span>

                    <select id="TipoDocumento" name="TipoDocumento" class="form-control" required>
                        <option data-tipo=""></option>
                        <option data-tipo="Biomédico">Biomédico</option>
                        <option data-tipo="Dentista">Dentista</option>
                        <option data-tipo="Médico">Médico</option>
                        <option data-tipo="Farmacêutico">Farmacêutico</option>
                        <option data-tipo="Enfermeiro">Enfermeiro</option>
                        <option data-tipo="Acadêmico">Acadêmico</option>
                        <option data-tipo="Outros">Outros</option>
                        <option data-tipo="nao">Não sou da Areá da Saúde</option>
                        </select>
                        <span id="InputsDocumento">
                         <input class="form-control" type="hidden" name="CRO" id="Biomédico" placeholder="Digite seu CRO" disabled>
                         <input class="form-control" type="hidden" name="CRO" id="Dentista" placeholder="Digite seu CRO" disabled>
                         <input class="form-control" type="hidden" name="CRO" id="Médico" placeholder="Digite seu CRO" disabled>
                         <input class="form-control" type="hidden" name="CRO" id="Farmacêutico" placeholder="Digite seu CRO" disabled>
                         <input class="form-control" type="hidden" name="CRO" id="Enfermeiro" placeholder="Digite seu CRO" disabled>
                         <input class="form-control" type="hidden" name="Acadêmico" id="Acadêmico" placeholder="Digite seu RG" disabled>
                         <input class="form-control" type="hidden" name="outros" id="Outros" placeholder="Digite seu CRO" disabled>
                         <input class="form-control" type="hidden" name="CRO" id="Não sou da Areá da Saúde" placeholder="CPF" disabled>
                        </span>
                        <select name="estado" class="form-control" id="TipoDocumento" required>
                            <option value="AC">Acre</option>
                            <option value="AL">Alagoas</option>
                            <option value="AP">Amapá</option>
                            <option value="AM">Amazonas</option>
                            <option value="BA">Bahia</option>
                            <option value="CE">Ceará</option>
                            <option value="ES">Espírito Santo</option>
                            <option value="GO.">Goiás</option>
                            <option value="MA">Maranhão</option>
                            <option value="MT">Mato Grosso</option>
                            <option value="MS">Mato Grosso do Sul</option>
                            <option value="MG">Minas Gerais</option>
                            <option value="PA">Pará</option>
                            <option value="PB.">Paraíba</option>
                            <option value="PR">Paraná</option>
                            <option value="PE">Pernambuco</option>
                            <option value="PI">Piauí</option>
                            <option value="RJ">Rio de Janeiro</option>
                            <option value="RN">Rio Grande do Norte</option>
                            <option value="RS">Rio Grande do Sul</option>
                            <option value="RO.">Rondônia</option>
                            <option value="RR">Roraima</option>
                            <option value="SC">Santa Catarina</option>
                            <option value="SP">São Paulo</option>
                            <option value="SE.">Sergipe</option>
                            <option value="TO">Tocantins</option>
                            <option value="DF">Distrito Federal</option>
                        </select>
                 </div>
              </div>
           </div>

here the js

 //desabilita e esconde todos os inputs do campo area de atuação
      $('#TipoDocumento').change(function(e) {
         let opcaoSelecionada = this.querySelector('option:checked');
  
  //desabilita e esconde todos os inputs
        let inputs = $('#InputsDocumento input');
         inputs.attr('type', 'hidden');
         inputs.attr('disabled', '');
  
  //habilita e mostra o input relevante
        let inputEscolhido = inputs.filter('#'+ opcaoSelecionada.dataset.tipo);
         inputEscolhido.attr('type', 'text');
         if (opcaoSelecionada.dataset.tipo !== 'placeholder')
         inputEscolhido.removeAttr('disabled');
        });
    

1 answer

0


First change the id of select "state", it was the same of type:

<select name="estado" class="form-control" id="estado" required>

In the example I did I put status

Then in Js, check the value and if it is one of the three, hide the select, otherwise it shows. This code goes inside the onchange function you made.

//mostra ou não o estado
      switch($('#TipoDocumento').val()) {
        case "Acadêmico":
        case "Outros":
        case "Não sou da Areá da Saúde":          
                $("#estado").hide();
            break;
        default:
            $("#estado").show();
          break;
      }

Your whole Js looks like this:

//desabilita e esconde todos os inputs do campo area de atuação
  $('#TipoDocumento').change(function(e) {
         let opcaoSelecionada = this.querySelector('option:checked');
  
  //desabilita e esconde todos os inputs
        let inputs = $('#InputsDocumento input');
         inputs.attr('type', 'hidden');
         inputs.attr('disabled', '');
  
  //habilita e mostra o input relevante
        let inputEscolhido = inputs.filter('#'+ opcaoSelecionada.dataset.tipo);
         inputEscolhido.attr('type', 'text');
         if (opcaoSelecionada.dataset.tipo !== 'placeholder')
         inputEscolhido.removeAttr('disabled');
         
         
      //mostra/nãom mostra o estado
      switch($('#TipoDocumento').val()) {
        case "Acadêmico":
        case "Outros":
        case "Não sou da Areá da Saúde":          
                $("#estado").hide();
            break;
        default:
            $("#estado").show();
          break;
      }
   });

Fiddle of the running code: https://jsfiddle.net/woLfvs72/3/

Browser other questions tagged

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