Calculate duplicate input value

Question

Calculate duplicate input value

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

I have a div with 3 inputs (value, aliquot, totalvalue) they are inside a div clone in jquery ... I can do the calculation through id like in the code below but as it is cloned in jquery it only works in div main because it can not have duplicate id ..

I thought about getting the input by name, but I could not get it yet ...

Note that when you click on "CLON" the div only works on the original div, not cloned ..

//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><inputtype="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>

javascript jquery

asked by anonymous 11.11.2016 / 00:25

2 answers

0

With javascript it is possible to get the previous element and the next element of a given node using previousSibling and 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><inputtype="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>

11.11.2016 / 01:47

Stacking Blocks with Bootstrap SUM and GROUP BY duplicating values

score 2 · Accepted Answer

The following is the solution to your problem with my considerations:

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

To work with cloning you will need to stop using id's and start using classes.

It's better to create templates and leave them hidden, than you use the HTML in use on the screen to make their clones. In addition to being a good practice, it is clearer to visualize the responsibility of each element.

In HTML I passed the template of the% div to a hidden template .engloba and changed display: none; from id to input .

In JS I started to use only jQuery, besides separating the methods into functions and improving their nomenclatures.