Cube calculation with jquery

Navigation
1

I need to calculate the width * height * length * quantity.

The script is calculating only the fields that initial, those that are added according to the need are not included in the calculation.

The first calculation is for each line: 

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

Sum all all the #cubagedModels and displays in: 

#cubagemMateriaisTotal

Testing

  • Using the clone option: link
  • Duplicating the form works: link

It seems that cloque does not work.

My code: 

<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);
    });
});
    
asked by anonymous 13.05.2015 / 22:48

1 answer

1

It's important to find a way to do this that is scalable. That is: have the same code regardless of the number of rows. This means relying less on ID's that are by nature unique. Code suggestion: 

$(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: link

.reduce() is very useful here to add values to an array.

    
13.05.2015 / 23:50
How can I put an element next to the other? Android guidance (PORTRAIT / LANDSCAPE) addTextChangedListener