Abrir NOVO campo ao SELECIONAR OPCAO

Muito simples, fiz algo bem básico, veja:

Spoiler

<select id="id_do_seletor">
 <option value="1">Adicionar 1 input text</option>
 <option value="2">Adicionar 2 input's text</option>
 <option value="3">Adicionar 3 input's text</option>
 <option value="4">Adicionar 4 input's text</option>
 <option value="5">Adicionar 5 input's text</option>
</select>

<div id="onde_inserir"></div>

<script>
 var seletor = document.getElementById('id_do_seletor');
 var inserir = document.getElementById('onde_inserir');
 var alvo, novo;
 var quantidade = 0;
 var identificador = 0;
 seletor.addEventListener('change', criarInputs, false);

 function criarInputs(e) {
 alvo = e.target;
 quantidade = alvo.value;
 while (quantidade != 0) {
 quantidade--;
 identificador++;
 novo = document.createElement('input');
 novo.type = 'text';
 novo.name = 'input_inserido_' + identificador;
 inserir.appendChild(novo);
 }
 }
</script>

  

	 

	E se por acaso quiser limpar os inputs que tenham sido inseridos toda vez que o select é alterado basta adicionar isso antes do loop do **while**

	**inserir.innerHTML = null; // < Isso vai limpar o elemento pai onde os inputs são colocados**

	E lembre-se de controlar a variável **identificador** pois é ela quem vai fazer com que cada input possua um name diferente.

	 

	Qualquer coisa abra o console do navegador e veja como a manipulação é feita pelo script

Obrigado caraa vlw mesmooo, estou criando meu site obg

>

15 horas atrás, Omar~ disse:

Muito simples, fiz algo bem básico, veja:

Mostrar conteúdo oculto

<select id="id_do_seletor">
 <option value="1">Adicionar 1 input text</option>
 <option value="2">Adicionar 2 input's text</option>
 <option value="3">Adicionar 3 input's text</option>
 <option value="4">Adicionar 4 input's text</option>
 <option value="5">Adicionar 5 input's text</option>
</select>

<div id="onde_inserir"></div>

<script>
 var seletor = document.getElementById('id_do_seletor');
 var inserir = document.getElementById('onde_inserir');
 var alvo, novo;
 var quantidade = 0;
 var identificador = 0;
 seletor.addEventListener('change', criarInputs, false);

 function criarInputs(e) {
 alvo = e.target;
 quantidade = alvo.value;
 while (quantidade != 0) {
 quantidade--;
 identificador++;
 novo = document.createElement('input');
 novo.type = 'text';
 novo.name = 'input_inserido_' + identificador;
 inserir.appendChild(novo);
 }
 }
</script>

  

  

 E se por acaso quiser limpar os inputs que tenham sido inseridos toda vez que o select é alterado basta adicionar isso antes do loop do **while**

 **inserir.innerHTML = null; // < Isso vai limpar o elemento pai onde os inputs são colocados**

 E lembre-se de controlar a variável **identificador** pois é ela quem vai fazer com que cada input possua um name diferente.

  

 Qualquer coisa abra o console do navegador e veja como a manipulação é feita pelo script

	Obg mesmooooo vlw veiioo