Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

kernmatheus

Formulário Dinamico - Alterar de acordo com valor inserido

Por , em Javascript

Recommended Posts

kernmatheus    4

kernmatheus
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

assim:

http://wbruno.com.br/ajax/combobox-preenche-input-ajax/

Compartilhar este post

Link para o post
Compartilhar em outros sites

kernmatheus    4

kernmatheus
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

<style>
.sector { display: none }
.is-active { display: block; }
</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>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito