Soma de valores de input em Formulário Pai X FIlho

Implementei um formulário PaiXFilho, onde os usuários incluem as linhas e informam os dados nos campos, e existe o campo "valor_" onde eles devem informar um valor numérico. Preciso fazer a soma de todos esses valores incluídos no campo valor de cada uma das linhas adicionadas e depois incluir o resultado da soma em uma label ao final do formulário. Tentei utilizar essa função através de um evento "OnBlur" diretamente no input do campo valor e também com um evento "Click" no botão "Calcular" que criei porém de nenhuma das formas funcionou. A única forma que deu certo foi através do botão, porém algum erro na minha função fez com que o cálculo somasse mais de 1 vez o primeiro campo do formulário gerando uma soma incorreta dos valores. Existe uma forma diferente e mais funcional de implementar essa funcionalidade?

Segue minhas funções:

$("input[id^='valor___']").on("blur", function(){
    somarTotal();
});

function somarTotal(){
    var valor = 0;
    // dessa forma irá funcionar
    $(document).on("blur", "input[id^='valor___']", function(e){
        valor = valor + parseFloat($(this).val());
    });

    // alimenta o label "valor antes das 15h" com a soma dos valores dos depósitos
    $(".total-antes").text(valor);
}

function somarTotal(){
        var valor = 0;
        var total = 0;
        var i = 0;        
        while (i < $("input[id^='valor___']").length){
            valor = valor + parseFloat($("input[id^=valor___']").val());
            i++;
        }
        $(".total-antes").text("R$ "+valor);        
    }

Calcular


Form.png

Tabela PaiXFilho:

Sem título.png

compartilhar
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

2 respostas

Não é a resposta que estava procurando? Procure outras perguntas com as tags javascript jquery tablename paixfilho formulario html funcao ou faça a sua própria pergunta.