Fala galera tudo belezinha com vocês? Estou mexendo no meu sistema (leia-se laboratório).
Já basicamente criei todo o Back-End, mas no front estou apanhando com alguns tratamentos.
Estou criando uma tela de orçamentos, onde o Usuário vai abrindo novas linhas de forma dinâmica para cada produto acrescentado.
Meu código está assim:
function id(valor_campo) {
return document.getElementById(valor_campo);
}
function getValor(valor_campo) {
var valor = document.getElementById(valor_campo).value.replace(',', '.');
return parseFloat(valor);
}
function multiplica() {
var total = getValor('qtd') * getValor('valoru');
id('valort').value = total;
}
$(document).ready(function() {
var max_fields = 100;
var x = 1;
$('#add_field').click(function(e) {
e.preventDefault(); //prevenir novos clicks
if (x < max_fields) {
$('#listas').append('\
<tbody>\
<tr class="remove' + x + '">\
<td><input type="text" name="qtd[]" id="qtd[]" placeholder="N°"></td>\
<td><input type="text" name="item[]" id="item" placeholder="Descrição do Produto ou Serviço"></td>\
<td><input type="text" name="valoru[]" onblur="multiplica()" id="valoru[]" placeholder="Valor"></td>\
<td><input type="text" name="valort[]" id="valort[]" maxlength="100" /></td>\
</td>\
<td><a href="#" class="remove_campo" id="remove' + x + '"><button type="button" class="btn-danger">Remover</button></a></td>\
</tbody>\
');
x++;
}
});
$('#listas').on("click", ".remove_campo", function(e) {
e.preventDefault();
var tr = $(this).attr('id');
$('#listas tr.' + tr).remove();
x--;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="listas" class="table table-hover">
<thead>
<tr>
<th>Qtd</th>
<th>Item</th>
<th>Valor Unitário</th>
<th>Valor Total</th>
<th>Ação</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="qtd[]" id="qtd" placeholder="N°"></td>
<td><input type="text" name="item[]" id="item" placeholder="Descrição do Produto ou Serviço" /></td>
<td><input type="text" name="valoru[]" id="valoru" onblur="multiplica()" /></td>
<td><input type="text" name="valort[]" id="valort" /></td>
<td></td>
</tr>
</tbody>
</table>
Acabei montando com base em dicas de outros usuários daqui. Porém eu quero fazer o cálculo do input qtd
multiplicando o valor de valoru
mostrando total em valort
Porém quando acrescento outra linha, meu código simplesmente não consegue fazer o cálculo (Imagino que por conta do ID se repetir). Qual seria a melhor forma de contornar isso?
Agradeço a todos que puderem me ajudar. Um abraço e um bom café quentinho nesse frio =P