1
resposta

Preciso capturar os inputs de um formulário dinâmico

Olá pessoal estou criando um formulário que calcula a média de uma valor, veja meu HTML:

<form  id="form1" class="form-geral">

        <label for="pergunta1">Qual o nome da Moeda que deseja calcular?</label>
        <input id="pergunta1" type="text">

        <label for="pergunta2">Quantas entradas deseja calcular?</label>
        <input id="pergunta2" type="number">


        <label for="">Baseado em qual paridade deseja calcular?</label>

        <div  class="form-radio">
        <input id="pergunta3" type="radio" id="Dolar" name="moeda" value="Dolar">
        <label for="pergunta3">Dolar</label>
        <input id="pergunta4" type="radio" id="Bitcoin" name="moeda" value="Bitcoin">
        <label for="pergunta4">Bitcoin</label>
        </div>



        <div class="perguntaEntrada">
            <label for="entrada1">Qual o valor da sua entrada 1 ?</label>
            <input id="entrada1" type="number" name="entradas"> 
        </div>

        <div id="boxAdicionados" class="perguntaEntrada" >

        </div>


        <button id="add" class="add">+</button>
        <button id="button" class="botao-calcular" type="submit" form="form1">Calcular</button>
    </form>

Eu criei uma função que duplica um campo do meu formulário dinamicamente para a quantidade que o usuário precisa.

Mas agora preciso capturar todos os inputs de uma vez... mas não estou conseguindo alguem pode me ajudar?

Este é o meu js:

var btn_add = document.getElementById('add');
var btn_calcula = document.getElementById('button');
var form1 = document.getElementById('form1');
var boxAdicionados = document.getElementById('boxAdicionados');


var contador = 1;

    //AQUI EU PREVENI A ATUALIZAÇÃO AUTOMATICA DA PAGINA E TBM CRIE A FUNÇÃO DE CRIAÇÃO DOS ELEMENTOS

    btn_add.addEventListener('click', function (evento) {
        contador++;
        evento.preventDefault();
        createLabel();
        createInput();
    });


// <label for="pergunta5">Qual o valor da sua entrada?</label>
function createLabel() {
    let elemento = document.createElement('label');
    elemento.setAttribute('for', 'entrada' + contador);
    elemento.textContent = 'Qual o valor da sua entrada ' + contador + ' ?';

    boxAdicionados.appendChild(elemento);
}

//<input id="pergunta5" type="number" name="entradas"> 
function createInput() {
    let elemento = document.createElement('input');
    elemento.setAttribute('type', 'number');
    elemento.setAttribute('name', 'entradas');
    elemento.setAttribute('id', 'entrada' + contador);


    boxAdicionados.appendChild(elemento);
}




function verifica(){

var nomeDoAtivo = document.querySelector('#pergunta1');
var numeroDeEntradas = document.querySelector('#pergunta2');
var calcDolar = document.querySelector('#pergunta3');
var calcBitcoin = document.querySelector('#pergunta4');

var mediaFinal = 0;

var entrada1 = document.querySelector('#entrada1');
var entrada2 = document.querySelector('#entrada2');
var entrada3 = document.querySelector('#entrada3');


var entradas = entrada1.valueAsNumber + entrada2.valueAsNumber + entrada3.valueAsNumber;

mediaFinal = entradas / contador;

if (inpu){}

console.log(mediaFinal);


}


btn_calcula.addEventListener('click', function (evento) {
    evento.preventDefault();


});

let button = document.querySelector("#button");
    button.onclick = verifica;

1 resposta

Oi, Hugo, tudo bem?

Desculpe a demora em te responder!

Para capturar todos os inputs de uma vez podemos o método querySelectorAll para selecionar todos os inputs do seu formulário. Você pode fazer isso da seguinte forma:

var inputs = document.querySelectorAll('input');

Isso irá retornar uma lista com todos os inputs do seu formulário. Em seguida, podemos percorrer os elementos da lista com um loop e acessar o valor de cada input. Por exemplo:

for (var i = 0; i < inputs.length; i++) {
  console.log(inputs[i].value);
}

Esse loop irá percorrer todos os inputs do seu formulário e imprimir o valor de cada um no console.

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!