0

Estou desenvolvendo um formulário de cadastro e adicionei um campo Form-Select para saber qual o Cargo dos funcionários (Secretário / Assessor) da empresa. No entanto, ao selecionar a opção outros gostaria que habilitasse um campo para digitação manual do cargo.

*CÓDIGO

<div class="mb-3 col-sm-3">
        <label for="cargo">Cargo</label>
            <select class="form-select" name ="cargo">
            <option value="1">Secretário</option>
            <option value="2">Assessor</option>
            <option value="3">Outros</option>
        </select>
</div>


if ($_POST["cargo"] == 3){
echo                   
    <label for="3"></label>
    <input type="text" class="form-control" name ="3">
    }

2 Respostas 2

0

Você pode fazer isso usando javascript.

cargoSelect.addEventListener('change', function (e) {
  let element =  document.getElementById('outrosInput');
  if (e.target.value === "3") {
    element.type = 'text';
    element.disabled = false;
  } else {
    element.type = 'hidden';
    element.disabled = true;
  }
});
        <select id="cargoSelect" class="form-select" name ="cargo">
            <option value="1">Secretário</option>
            <option value="2">Assessor</option>
            <option value="3">Outros</option>
        </select>
        <br>
        <br>
        <input  type="hidden" id="outrosInput">

1
  • Muito Obrigado pela ajuda. 10/02/2021 às 15:15
0

Consegui resolver da seguinte forma:

Adcionei o <input type="text" class="form-control"> dentro de uma div PAI e, através de um arquivo stylesheet.css removi, teporariamente, ele.

#pai div{
    display: none;
}

E, através do JavaScript, criei as regras abaixo:

$(document).ready(function(){

    $('#cargo').on('change', function(){

        var selectValor = '#' +$(this).val();

        $('#pai').children('div').hide();
        $('#pai').children(selectValor).show();

    });
});

Desa forma, a div PAI que está temporariamente removida, irá aparecer quando o valor do cargo selecionado for igual ao valor da div PAI.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .