Repetir campos de acordo com o numero do dropdown

Question

Como Não sei muito de javascript gostaria de uma ajuda de como fazer que ao escolher um numero no dropdown, repeti-se os campos pelo valo escolhido //loop x quantidade do select

//fim loop

user60252 · Answer

Javascript puro onchange - o evento ocorre quando o valor de um elemento for alterado function criarInputs() { //recupera o valor do option selecionado (n) let select = document.getElementById('valores5'); let n = select.options[select.selectedIndex].value; let campos="" for (i = 0; i < n; i++) { //só pra ver no console.log console.log(''); } } Observe que nos inputs o atributo “name” tem o mesmo valor para cada conjunto novo adicionado. Para simplificar imagine o seguinte formulário: Após fazer a requisição, no teste.php eu exibo as informações que vieram do form e o retorno é esse: Array ( [nome] => nome2 ) 1 Veja que apesar de eu ter dois input’s no formulário, só foi me enviado um. Isso acontece porque quando um form é submetido e este tem vários input’s com o valor do atributo “name” iguais, só o último é considerado. Para resolver isso Para que todos input’s com o mesmo valor do atributo “name” sejam entregues após requisição, basta adicionar colchetes ao lado do valor do atributo “name”. Exemplo: Seu código teria que ser function criarInputs() { //recupera o valor do option selecionado (n) let select = document.getElementById('valores5'); let n = select.options[select.selectedIndex].value; let campos=""; for (i = 0; i < n; i++) { if (n>1){ console.log(''); }else{ console.log(''); } } document.getElementById("demo").innerHTML = campos; }

Para não haver a duvida quanto ao comentário "Quase isso.... só que se eu escolher o numero 4 e depois trocar um menor tipo o 2 ele esta somando 4 mais 2 ao invés de remover" Vamos executar sem console.log function criarInputs() { //recupera o valor do option selecionado (n) let select = document.getElementById('valores5'); let n = select.options[select.selectedIndex].value; let campos=""; for (i = 0; i < n; i++) { if (n>1){ campos +='

'; }else{ campos +='

'; } } document.getElementById("demo").innerHTML = campos; }

Rodrigo Vinicius · Answer

Você pode usar o Jquery e criar de acordo com os ids e classes. Segue um exemplo para você poder fazer uns testes conforme suas necessidades. $('#valores5').change(function() { let valores5 = $('#valores5').val() $('.div-campo-controle').remove(); for (var i = 0; i < valores5; i++) { let novosCampos = $("#campo-modelo").clone() novosCampos.attr('id', 'campo='.concat(i + 1)); novosCampos.addClass('div-campo-controle') novosCampos.insertAfter("div.div-campo:last"); } });

placementw · Answer

Bom, tu pode gerar esse html por meio do JS, da pra fazer assim: Arrumei teus values no select, não tem pq começar do 0 se você vai iterar pra gerar os inputs

Fazer uma div pra ser o "wrapper" dos teus inputs e gerar eles dinâmicamente. Aqui vai o script pra tu usar, daria pra economizar umas linhas nesse código mas deixei assim pra ficar um pouco mais fácil de entender let parent = document.getElementById('exemplo') function createDiv () { let div_html = document.createElement('div'); // criar uma div pra botar os 3 campos //criar os campos com os atributos que você quer let input1 = document.createElement('input'); input1.type = 'text'; input1.name = 'nome'; input1.class = 'form-control'; let input2 = document.createElement('input'); input2.type = 'text'; input2.name = 'cpf'; input2.class = 'form-control'; let input3 = document.createElement('input'); input3.type = 'text'; input3.name = 'tel'; input3.class = 'form-control'; // montar a div com os 3 fields div_html.appendChild(input1) div_html.appendChild(input2) div_html.appendChild(input3) return div_html } function createFields() { // remover os campos que já estão dentro do parent, pra não ficar adicionando campos um atrás do outro while(parent.firstChild) { parent.removeChild(parent.firstChild); } let num = document.getElementById('valores5').value // pegar valor do select for (let x = 0; x < Number(num); x++) { parent.appendChild(createDiv()) // adicionar a div com os fields, iterando o valor do select } }

Repetir campos de acordo com o numero do dropdown

3 Answers

Add your own answers!

Ask a Question