1

Preciso calcular a largura * altura * comprimento * quantidade.

O Script esta calculando apenas dos campos que inicial, os que são adicionados de acordo com a necessidade não são incluídos no calculo.

O primeiro calculo é de cada linha:

#cubagemMateriais = (.comprimentoMaterial * .larguraMaterial * .alturaMaterial) * .volumeMaterial

Soma todos os recultados #cubagemMateriais e exibe no:

#cubagemMateriaisTotal

Testes

Parece que o cloque não funciona.

Meu código:

<div id="formularioMateriais">
    <div class="row">
            Volume.........: <input name="volumeMaterial[]" id="" type="number" class="form-control volumeMaterial" value="" required><br>
            Material.........:<input name="nomeMaterial[]"  id="" type="text" class="form-control nomeMaterial" value="" required><br>
            Compimento..:<input name="comprimentoMaterial[]"  id="" type="text" class="form-control comprimentoMaterial" value="" required><br>
            Largura..........:<input name="larguraMaterial[]" id="" type="text" class="form-control larguraMaterial" value="" required><br>
            Altura.............:<input name="alturaMaterial[]"  id="" type="text" class="form-control alturaMaterial" value="" required>

            <a href="#" class="btn btn-success btn-xs adicionarCampo2" data-id="2" id="" style="margin:35px 0 0 0"><i class="fa fa-plus bigger-110 icon-only"></i>+ </a><br>

            <b>Soma da linha</b>.:<input name="cubagemMateriais[]" id="cubagemMateriais" type="text" >
            <hr>
    </div>
</div>
Soma total <input  id="cubagemMateriaisTotal" >

JS

$(function () {
    var divContent2 = $('#formularioMateriais');
    var botaoAdicionar2 = $('a[data-id="2"]');
    var i2 = 1;

    //Ao clicar em adicionar ele cria uma linha com novos campos
    $(botaoAdicionar2).click(function () {
        $('<div class="conteudoIndividual2"><div class="row"><div class="col-xs-1"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Volume</label><input name="volumeMaterial[]" type="number" class="form-control volumeMaterial" id="" value="" required></div></div><div class="col-xs-4"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Material</label><input name="nomeMaterial[]" type="text" class="form-control nomeMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Compimento</label><input name="comprimentoMaterial[]" type="text" class="form-control comprimentoMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Largura</label><input name="larguraMaterial[]" type="text" class="form-control larguraMaterial" id="" value="" required></div></div><div class="col-xs-2"><div class="form-group" style="margin:0 0 0 1px;"><label class="control-label">Altura</label><input name="alturaMaterial[]" type="text" class="form-control alturaMaterial" value="" required></div></div><div class="col-xs-1"><div class="form-group"><button class="btn btn-danger btn-xs linkRemover2" style="margin:35px 0 0 0"><i class="fa fa-times bigger-110 icon-only"></i></button></div><input name="cubagemMateriais[]" id="cubagemMateriais" ></div></div></div>').appendTo(divContent2);
        $('#removehidden2').remove();
        i2++;
        $('<input type="hidden" name="quantidadeCampos2" value="' + i2 + '" id="removehidden2">').appendTo(divContent2);
    });

    //Cliquando em remover a linha é eliminada
    $('#formularioMateriais').on('click', '.linkRemover2', function () {
        $(this).parents('.conteudoIndividual2').remove();
        i2--;
    });
});

/////////////////////////////////////////////////////////////////////////////////////////////////

$(document).ready(function () {
    $(".alturaMaterial, .comprimentoMaterial, .larguraMaterial, .volumeMaterial").on('keyup', function () {
        var $row = $(this).closest('.row');
        var cubagemMateriais = [".volumeMaterial", ".comprimentoMaterial", ".larguraMaterial", ".alturaMaterial"].reduce(function (soma, classe) {
            var value = parseInt($row.find(classe).val(), 10);
            return value * soma;
        }, 1);
        $row.find('input[name="cubagemMateriais[]"]').val(cubagemMateriais || 0);

        // somar todas as linhas
        var total = $('input[name="cubagemMateriais[]"]').get().reduce(function (soma, input) {
            var value = parseInt(input.value, 10);
            return value + soma;
        }, 0);
        $('#cubagemMateriaisTotal').val(total);
    });
});
8
  • Existe algum HTML separador/wrapper de cada linha? Porquê mouseover?
    – Sergio
    Commented 13/05/2015 às 20:52
  • Essa é uma versão mais simplificada. mouseover é somente para teste.
    – Tiago
    Commented 13/05/2015 às 21:07
  • A resposta fica bem mais simples se houver um separador entre linhas no HTML. Existe? tipo uma div que contem cada linha?
    – Sergio
    Commented 13/05/2015 às 21:09
  • @Sergio separei a parte do form veja nesse link jsfiddle.net/y0x18e2p visualmente fica assim i.imgur.com/Q8JRvdH.png
    – Tiago
    Commented 13/05/2015 às 21:21
  • 1
    Por favor, especifique no texto da pergunta qual o ser problema exato. Commented 13/05/2015 às 22:10

1 Resposta 1

1

É importante achares uma maneira de fazer isso que seja escalável. Ou seja: tenha o mesmo código independentemente do numero de linhas. Isso implica depender menos de ID's que são por natureza únicas. Sugestão de código:

$(document).ready(function () {
    $('#formularioMateriais').on('keyup', 'input', function (e) {
        var $row = $(e.target).closest('.row');
        var cubagemMateriais = [".volumeMaterial", ".comprimentoMaterial", ".larguraMaterial", ".alturaMaterial"].reduce(function (soma, classe) {
            var value = parseInt($row.find(classe).val(), 10);
            return value * soma;
        }, 1);
        $row.find('input[name="cubagemMateriais[]"]').val(cubagemMateriais || 0);

        // somar todas as linhas
        var total = $('input[name="cubagemMateriais[]"]').get().reduce(function (soma, input) {
            var value = parseInt(input.value, 10) || 0;
            return value + soma;
        }, 0);
        $('#cubagemMateriaisTotal').val(total);
    });
});

jsFiddle: http://jsfiddle.net/xp3v2grg/6/

O .reduce() é muito util aqui para somar valores de uma array.

16
  • Aqui não esta calculando, fica sempre 0
    – Tiago
    Commented 13/05/2015 às 22:08
  • @Tiago repara que estou a usar classes. Então tive de adicionar classe volumeMaterial no primeiro input, e também mudei de ID para class no input total de cada linha.
    – Sergio
    Commented 13/05/2015 às 22:10
  • ele esta calculado somente uma linha, veja i.imgur.com/uXSRjGT.png
    – Tiago
    Commented 13/05/2015 às 22:33
  • Coloquei os dois codigo juntos. O de add nova linha e o seu de calculo. No meu arquivo o add nova linha funciona, mas nesse link não, mas da para você ver como é. veja jsfiddle.net/xp3v2grg/1
    – Tiago
    Commented 13/05/2015 às 22:58
  • 1
    Muito obrigado novamente.
    – Tiago
    Commented 14/05/2015 às 17:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .