-1

Como não tenho conhecimento de javascript preciso de uma ajuda de como posso fazer, esse meu script abaixo realizar o somatório dos itens dos campos "valor" de cada linha em loop

No caso teria que no campo "Total" aparecer dinamicamente o somatório de cada linha

		(function ($) {
		  $('#destino_in').on('change', function () {
		      var $self = $(this);

		      $('#destino_out').val($self.val());
		  });
		}(jQuery));

		$(function () {
		  var divContent = $('#materialInst');
		  var botaoAdicionar = $('a[data-id="1"]');
		  var i = 1;
		  // VARIAVEL ADD
		  var destino;

		  //Ao clicar em adicionar ele cria uma linha com novos campos
		  $(botaoAdicionar).click(function () {

		    $('<div class="conteudoIndividual"><tr><td>'+
		      '<input type="text" name="estado" size="5" class="form-control" value="" />'+
		      '<select name="destino_in" id="destino_in" class="destino_in form-control">'+
		        '<option value="" selected disabled>Selecione...</option>'+
		        '<option value="Vilamar-10,00">Vilamar</option>'+
		        '<option value="Savoy-20,00">Savoy</option>'+
		      '</select>'+
		      '<input type="text" placeholder="Valor" name"valor" id="valor" class="form-control" />'+
		      '<input type="text" size="5" name="numero" class="form-control" value="" />'+
		      '<a href="#" class="linkRemover">Remover</a></td></tr></div>').appendTo(divContent);

		    $('#removehidden').remove();
		    i++;
		    $('<input type="hidden" name="quantidadeCampos" value="' + i + '" id="removehidden">').appendTo(divContent);

		    // ADD AQUI
		    // Aqui acontece a inserção dos valores no outro input
		    destino = $('.destino_in');

		    // verifico no evento de change
		    destino.on('change', function() {
		        // quando ocorrer, capturo o valor selecionado
		        var selected = $(this).val();
		        // divido a string em 2, separada pelo (-) [nome(-)valor]
		        var res = selected.split("-", 2);

		        // res[0] = "Vilamar";
		        // res[1] = "10,00";

		        // adiciono no input #valor o resultado do array na posição 1
		        $(this).next().val(res[1]);
		    });
		    // FIM ADD
		  });

		  //Cliquando em remover a linha é eliminada
		  $('#materialInst').on('click', '.linkRemover', function () {
		    $(this).parents('.conteudoIndividual').remove();
		    i--;
		  });
		});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="adicionar" data-id="1">Adcionar nova Linha</a>
  
<form id="form1" name="form1" action="src/acao/cli.php" method="POST" enctype = "multipart/form-data" > 
<table>
  <div id="materialInst">
  </div>
  
  
  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="total" placeholder="Total">   <-- aqui devera aparecer o somatório 
 </form>
</table>

1
  • O <input> gerado dinamicamente para o valor tem o id="valor" que está errado pois irá forçar com que vários elementos na página tenham o mesmo id. O mesmo se aplica a todos os ids que está a utilizar na linha gerada.
    – Isac
    Commented 3/10/2018 às 10:36

1 Resposta 1

0

Existem algumas maneiras para que isso seja feito, este é apenas um deles.

Criando um array de objetos para salvar as informações de cada linha:

Para isso, primeiro valos utilizar a variável 'i' para tornar única cada item desta lista, fazendo que cada uma das divs criadas tenham um 'data-id':

        $('<div class="conteudoIndividual" data-id="' + i + '"><tr><td>'+
          '<input type="text" name="estado" size="5" class="form-control" value="" />'+
          '<select name="destino_in" id="destino_in" class="destino_in form-control">'+
            '<option value="" selected disabled>Selecione...</option>'+
            '<option value="Vilamar-10,00">Vilamar</option>'+
            '<option value="Savoy-20,00">Savoy</option>'+
          '</select>'+
          '<input type="text" placeholder="Valor" name"valor" id="valor" class="form-control" />'+
          '<input type="text" size="5" name="numero" class="form-control" value="" />'+
          '<a href="#" class="linkRemover">Remover</a></td></tr></div>').appendTo(divContent);

Agora será necessário criar uma variável contendo uma lista de objetos onde serão armazenados os dados de cada uma das linhas:

  ...
  var divContent = $('#materialInst');
  var botaoAdicionar = $('a[data-id="1"]');
  var itens = [];
  var i = 1;
  ...

O próximo passo é, quando uma linha for adicionada, um novo item também será adicionado no array:

  ...
  // ADD AQUI
  // Aqui acontece a inserção dos valores no outro input
  destino = $('.destino_in');
  itens.push({
     "destino": "", 
     "valor": 0.0
  });
  // verifico no evento de change

Agora, no evento 'change' do destino, altere os dados das linhas inseridas anteriormente:

destino.on('change', function() {
    // quando ocorrer, capturo o valor selecionado
    var selected = $(this).val();
    // divido a string em 2, separada pelo (-) [nome(-)valor]
    var res = selected.split("-", 2);

    // res[0] = "Vilamar";
    // res[1] = "10,00";
    var idx = parseInt($(this).closest('div.conteudoIndividual').attr( 'data-id' )) - 1;
    itens[idx]["destino"] = res[0];
    if(res[1]) {
        itens[idx]["valor"] = parseFloat(res[1].replace(',', '.'));
    }
    // adiciono no input #valor o resultado do array na posição 1
    $(this).next().val(res[1]);
});

agora tratemos o evento de remover o item:

//Cliquando em remover a linha é eliminada
$('#materialInst').on('click', '.linkRemover', function () {
  var elementToRemove = $(this).parents('.conteudoIndividual');
  var idx = parseInt(elementToRemove.attr( 'data-id' )) - 1;
  itens.splice(idx, 1);
  elementToRemove.remove();
  i--;
});

Agora é necessário, ao ser alterado um valor no select ou quando uma linha for removida, setar o somatório do campo "valor" de cada um dos itens no array, para isso, pode-se usar o método reduce:

$('inpút[name=total]').val(itens.reduce(function (prev, curr) { return prev + curr["valor"]; }, 0.0).toFixed(2).replace('.', ','));

o Javascript completo(incluso no seu) fica:

(function ($) {
  $('#destino_in').on('change', function () {
      var $self = $(this);
      $('#destino_out').val($self.val());
  });
}(jQuery));
$(function () {
  var divContent = $('#materialInst');
  var botaoAdicionar = $('a[data-id="1"]');
  var i = 1;
  var itens = [];
  // VARIAVEL ADD
  var destino;

  //Ao clicar em adicionar ele cria uma linha com novos campos
  $(botaoAdicionar).click(function () {
    $('<div class="conteudoIndividual" data-id="' + i + '"><tr><td>'+
      '<input type="text" name="estado" size="5" class="form-control" value="" />'+
      '<select name="destino_in" id="destino_in" class="destino_in form-control">'+
        '<option value="" selected disabled>Selecione...</option>'+
        '<option value="Vilamar-10,00">Vilamar</option>'+
        '<option value="Savoy-20,00">Savoy</option>'+
      '</select>'+
      '<input type="text" placeholder="Valor" name"valor" id="valor" class="form-control" />'+
      '<input type="text" size="5" name="numero" class="form-control" value="" />'+
      '<a href="#" class="linkRemover">Remover</a></td></tr></div>').appendTo(divContent);
    $('#removehidden').remove();            
    $('<input type="hidden" name="quantidadeCampos" value="' + i + '" id="removehidden">').appendTo(divContent);
    i++;
    // ADD AQUI
    // Aqui acontece a inserção dos valores no outro input
    destino = $('.destino_in');
    itens.push({
      "destino": "", 
      "valor": 0.0
    });
    // verifico no evento de change
    destino.on('change', function() {
      // quando ocorrer, capturo o valor selecionado
      var selected = $(this).val();
      // divido a string em 2, separada pelo (-) [nome(-)valor]
      var res = selected.split("-", 2);
      var idx = parseInt($(this).closest('div.conteudoIndividual').attr( 'data-id' )) - 1;
      itens[idx].destino = res[0];
      if(res[1]) {
          itens[idx].valor = parseFloat(res[1].replace(',', '.'));
      }
      $('input[name=total]').val(itens.reduce(function (prev, curr) { return prev + curr.valor; }, 0.0).toFixed(2).replace('.', ','));
      // adiciono no input #valor o resultado do array na posição 1
      $(this).next().val(res[1]);
    });
    // FIM ADD
  });

  //Cliquando em remover a linha é eliminada
  $('#materialInst').on('click', '.linkRemover', function () {
    var elementToRemove = $(this).parents('.conteudoIndividual');
    var idx = parseInt(elementToRemove.attr( 'data-id' )) - 1;
    itens.splice(idx, 1);
    elementToRemove.remove();
    i--;
    $('input[name=total]').val(itens.reduce(function (prev, curr) { return prev + curr.valor; }, 0.0).toFixed(2).replace('.', ','));
  });
});
3
  • Ola Amigo tentei montar aqui mais não funcionou... poderia colocar o código completo aqui pra mim... Commented 3/10/2018 às 13:03
  • segue ele montado jsfiddle.net/8y0t4x25 Commented 3/10/2018 às 13:12
  • 1
    Pronto, na última parte da resposta adicionei o javascript que eu expliquei ao da sua pergunta, testei no jsfiddle e funcionou: jsfiddle.net/8y0t4x25/10 Commented 3/10/2018 às 13:32

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