Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Senhores,
Preciso criar um formulário onde o primeiro campo seja para o usuário escolher a sua filial, as opções deste botão vem de um select. Os próximos campos dependem do valor inserido neste primeiro campo. Fiquei com duvidas de como fazer isso, por que no momento que o usuário escolher a opção o formulário terá que carregar os próximos campos. Tem alguma dica do que posso fazer?
Sou bem leigo no assunto, mas recebi essa missão no trabalho e estou correndo atrás, desculpem qualquer bobagem.
Obrigado.
Bruno,
Obrigado pelo retorno.
Mas acho que não expliquei bem, vou tentar de novo.
O formulário é para vistoriar os setores das filiais, onde cada "pergunta" terá duas opções: "apto" e "não apto".
Por exemplo, tenho duas filiais: na 1 tem os setores A e B, e na filial 2 tem os setores A e C.
Se o usuário selecionar filial 1, o formulário deverá carregar com as perguntas/campos referentes aos setores A e B, se selecionar filial 2 deverá carregar com perguntas referentes aos setores A e C.
Imaginei algo como os campos serem todos criados no formulário, porem desabilitados, e quando o usuário escolher a filial, chamar uma função que terá um IF para de acordo com a escolha dele mostrar os campos referentes a filial. Só que não consegui concretizar isso.
Exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style></style>
</head>
<body>
<select id="filial">
<option value="">Escolha</option>
<option value="filial-1">Filial 1</option>
<option value="filial-2">Filial 2</option>
</select>
<p class="sector" data-sector="a">Setor A</p>
<p class="sector" data-sector="a">Setor A</p>
<p class="sector" data-sector="b">Setor B</p>
<p class="sector" data-sector="b">Setor B</p>
<p class="sector" data-sector="c">Setor C</p>
<script>
var $filial = document.getElementById('filial');
var $allSectors = document.querySelectorAll('[data-sector="a"],[data-sector="b"],[data-sector="c"]');
$allSectors = [].slice.call($allSectors);
$filial.addEventListener('change', function() {
var v = this.value;
if (!v) return;
if (v === 'filial-1') {
var sectors = document.querySelectorAll('[data-sector="a"],[data-sector="b"]')
sectors = [].slice.call(sectors);
}
if (v === 'filial-2') {
var sectors = document.querySelectorAll('[data-sector="a"],[data-sector="c"]')
sectors = [].slice.call(sectors);
}
hideAll($allSectors);
sectors.forEach(function(sec) {
sec.classList.add('is-active');
});
});
function hideAll(elements) {
elements.forEach(function(el) {
el.classList.remove('is-active')
})
}
</script>
</body>
</html>
assim:
http://wbruno.com.br/ajax/combobox-preenche-input-ajax/