ADCIONAR CAMPOS DINÂMICAMENTE

[bynocrazyxxtbr 0]

Olá pessoal, tenho uma dúvida, estou desenvolvendo um projeto me pediram assim, vai ter 3 opções de público alvo, Interno, externo e servidor, se eu selecionar interto deve pedir o ano do usuário, pras demais opções não deve aparecer nada, alguem pode me ajudar

código do meu formulario

<div class="form-group">
                  	<div class="col-sm-2">
                    	<label for="inputEmail3" class="control-label"><h4>Público</h4></label>
                  	</div>
                  	<div class="col-sm-10">
	                  	<label class="radio-inline"><input type="radio" value="Interno" name="publico">Interno</label>
						<label class="radio-inline"><input type="radio" value="Externo" name="publico">Externo</label>
						<label class="radio-inline"><input type="radio" value="Servidor" name="publico">Servidor</label>
					</div>
                 </div>

[Thales Caricati 3]

Diaa!!

Existem muitas formas de trabalhar com campos de formulários, mostrar, esconder, validar, e tudo mais... também existem muitas bibliotecas que ajudam nisso mas como você tem dúvidas nesse processo, talvez seja interessante você aprender a manipular o DOM para depois partir para essas bibliotecas. Manipular o DOM de uma página HTML não é um bicho de 7 cabeças.

Vamos ao que interessa, ao seu problema:

Você possui um form, basicamente 3 radios e um input (para a data).

O status dos rádios iram dizer se o input da data deve aparecer ou não.

Vamos analizar o seguinte código:

var radios = document.getElementsByName('publico');
var rowAno = document.getElementById('row-ano');

var radioChange = function(){
  if(this.value == 'Interno') {
    rowAno.style.display = 'block';
  }
  else {
    rowAno.style.display = 'none';
  }
};

for(var i = 0; i < radios.length; i++) {
  radios[i].addEventListener('change', radioChange);
}

• A primeira variável radios, recupera todos os inputs que possuem o nome 'publico', precisamos dela para manipular o evento de mudança de status.
• A variável rowAno representa a linha em que o campo ano está contida.
• A variável radioChange armazena a função de change, ou seja, toda vez que alguém mudar o status do radio, essa função será executada. A função basicamente verifica se o valor do campo que você está mudando é Interno ou não, se for interno ele "mostra" o campo na tela, usando o estilo CSS display block, caso contrário, mudamos o estilo para display none.
• E por último, o nosso for, onde iremos adicionar a nossa função radioChange nos elementos radio.

Veja como ficou na prática: https://jsfiddle.net/55p3wsu5/

Você pode fazer isso usando JQuery, talvez seja mais fácil, porém minha ideia aqui neste fórum é mostrar algo mais, fazer com que algumas dúvidas sejam sanadas e que alguém realmente aprenda algo, não apenas copie um código postado e cole no seu projeto.

É nois, flw vlw!