2

Tenho uma div com 3 inputs (valor, aliquota, valortotal) elas estão dentro de uma div clone em jquery... Consigo fazer o calculo através do id como no código abaixo, mas como ela é clonada em jquery só funciona na div principal pois não pode ter id duplicado..

Pensei em pegar o input pelo name, mas não consegui ainda...

Note,que ao clicar em "CLONAR" a div ele só funciona na div original, na clonada não..

//Função que calcula os Inputs pelo ID
function Calc(){

ValorUm = parseFloat(document.getElementById('valor').value);
ValorDois = parseFloat(document.getElementById('aliquota').value);
  
document.getElementById('valortotal').value = (ValorUm*ValorDois/100).toFixed(2);
}
//Função clone
  $(document).ready(function() {
    var linha = $(".engloba:first").clone();
    $("#mais").click(function() {
        $("#conteudo_engloba").append(linha.clone());
    });
 });
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

<form>
    <input type="button" name="" value="CLONAR" id="mais">
</form>

<div id="conteudo_engloba">
	<div class="engloba">
		<h1>Conteudo</h1>
		
		Valor <input type="text" id="valor">
		Aliquota <input type="text" id="aliquota" onblur="Calc()">
		Valor Total <input type="text" id="valortotal">
				
	</div>
</div>

2
  • 1
    Car anão entendi sua explicação... Por que você clona? Commented 10/11/2016 às 23:34
  • KhaosDoctor, amigo, veja que tem o botão "CLONAR" que faz uma cópia da div atual e cria outra div...
    – Alh
    Commented 10/11/2016 às 23:41

2 Respostas 2

2

Segue abaixo a solução do seu problema com as minhas considerações:

$(document).ready(function() {
  clonar();	
  $("#mais").on("click", clonar);
});

function calcularValorTotal() {
  var $aliquota = $(this);
  var $valor = $($aliquota.prev());

  var valor = parseFloat($valor.val());
  var aliquota = parseFloat($aliquota.val());

  var valorTotal = (valor*aliquota/100).toFixed(2);

  var $valorTotal = $($aliquota.next());
  $valorTotal.val(valorTotal);
};

function clonar() {
  var linha = $("#engloba-template > .engloba").clone();

  $(linha).find(".aliquota").on("blur", calcularValorTotal);

  $("#conteudo_engloba").append(linha);
};
#engloba-template {
  display: none;  
}
<form>
  <input type="button" name="" value="CLONAR" id="mais">
</form>

<div id="conteudo_engloba">
</div>

<div id="engloba-template">
  <div class="engloba">
    <h1>Conteudo</h1>

    Valor <input type="text" class="valor">
    Aliquota <input type="text" class="aliquota">
    Valor Total <input type="text" class="valortotal">

  </div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

  1. Para trabalhar com clonagem você precisará deixar de usar id's e passar a usar classes.
  2. É melhor você criar templates e deixa-los escondidos, do que você usar o HTML em uso na tela para fazer as suas clonagens. Além de ser uma boa prática, é mais claro de visualizar a responsabilidade de cada elemento.

No HTML passei o modelo da div .engloba para um template escondido display: none; e alterei os id dos input para class.

No JS passei a usar somente jQuery, além de separar os métodos em funções e aprimorar as suas nomenclaturas.

1
  • Valeu @Lucas de Freitas Kauer...funcinou aqui... valeuu!!
    – Alh
    Commented 12/11/2016 às 2:18
0

Com javascript é possível obter o elemento anterior e o próximo elemento de um determinado nó usando previousSibling e nextElementSibling:

function Calc(elemento) {
  var anterior = elemento.previousSibling;
  var ValorUm = parseFloat(anterior.previousSibling.value);
  var ValorDois = parseFloat(elemento.value);
  elemento.nextElementSibling.value = (ValorUm * ValorDois / 100).toFixed(2);
}
//Função clone
$(document).ready(function() {
  var linha = $(".engloba:first").clone();
  $("#mais").click(function() {
    $("#conteudo_engloba").append(linha.clone());
  });
});
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

<form>
  <input type="button" name="" value="CLONAR" id="mais">
</form>

<div id="conteudo_engloba">
  <div class="engloba">
    <h1>Conteudo</h1>
    Valor
    <input type="text">Aliquota
    <input type="text" onblur="Calc(this)">Valor Total
    <input type="text">

  </div>
</div>

1
  • valeu @Lucas Costa, funcinou aqui tbm! Valeu!
    – Alh
    Commented 12/11/2016 às 2:17

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 .