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
- Usando a opção de clone: http://jsfiddle.net/xp3v2grg/5/
- Duplicando o formulário funciona: http://jsfiddle.net/xp3v2grg/4/
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);
});
});
mouseover
?mouseover
é somente para teste.div
que contem cada linha?