Nuevamente con este caso que no he podido solucionar que aunque se escriban en las casillas numero así por ejemplo 1.500
(con el . o , separador de decimales) el calculo sale mal. pues le puse al campo valor una función que le pone la ,
o el punto al ir escribiendo la cifra.
Entonces me gustaría que:
- Haga el calculo sin problemas.
- Que en el resultado aparezca este valor así con ese formato igual al ir sumando.
- Le añadí un input llamado Descuento en el cual se ingresa un valor que se debe descontar a la suma general que haya.
- No entiendo por que la función
function format(input)
que pone el separador de decimales no me permite escribir cifras grandes.
$(document).ready(function() {
var i = 1;
// Add
$("#add_row").click(function() {
b = i - 1;
$('#addr' + i).html($('#addr' + b).html()).find('td:first-child').html(i + 1);
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
// Delete
$("#delete_row").click(function() {
if (i > 1) {
$("#addr" + (i - 1)).html('');
i--;
}
calc_total();
});
// On input value change
$('#tab_logic tbody').on('input', 'input[type="number"]', function(evt) {
calc($(evt.currentTarget).closest('tr'));
});
$('#tax').on('input', function() {
calc_total();
});
});
// Calcular total de la fila
function calc($tr) {
var qty = $tr.find('.qty').val();
var price = $tr.find('.price').val();
// Total con 3 decimales
$tr.find('.total').val((qty * price).toFixed(0));
calc_total();
}
function calc_total() {
var total = 0;
$('#tab_logic .total').each(function() {
// Obtener el valor como float
total += parseFloat($(this).val());
});
// Dar formato con 3 decimales
$('#sub_total').val(total.toFixed(0));
// Esto podría estar en otra función
tax_sum = total / 100 * $('#tax').val();
$('#tax_amount').val(tax_sum.toFixed(0));
$('#total_amount').val((tax_sum + total).toFixed(0));
}
function format(input) {
var num = input.value.replace(/\./g,'');
if(!isNaN(num)){
num = num.toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1.');
num = num.split('').reverse().join('').replace(/^[\.]/,'');
input.value = num;
} else {
alert('Solo se permiten numeros');
input.value = input.value.replace(/[^\d\.]*/g,'');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="15" bgcolor="#999999" class="s" style="text-align: right"><img style="float:left;cursor: pointer" src="regresar.png" width="110" height="26" onClick="window.close()"/></td>
</tr>
<tr>
<!---------ver_reporte.php?&municipio=municipio&fecha1=fecha1&fecha2=fecha2&orden=orden----------->
<td height="203" bgcolor="#F0F1F2"><p></p>
<form name="form1" method="post" action="enviacostos.php">
<input name="id_servicio" type="hidden" id="id_servicio" value="<?php echo $id_servicio ?>" size="40">
<input name="numero_servicio" type="hidden" id="numero_servicio" value="<?php echo $numero_servicio ?>" size="40">
<input name="nombre" type="hidden" id="nombre" value="<?php echo $nombre ?>" size="40">
<div class="container" style="padding-left:25px">
<div class="row clearfix">
<div class="col-md-12">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
</thead>
<tbody>
<tr>
<td height="22"> </td>
<td>Producto</td>
<td>Cantidad</td>
<td>V. Unitario</td>
<td>V. Total</td>
</tr>
<tr id='addr0'>
<td>1</td>
<td><input type="text" name='product[]' placeholder='' list='brow' class="form-control" />
<datalist id='brow'>
<option value='VALOR SERVICIO'>
<option value='ACPM'>
<option value='COMIDA'>
<option value='HOTEL'>
<option value='OTROS'>
</datalist></td>
<td><input name='qty[]' type="number" class="form-control qty" placeholder='' min="0" step="0" value="1"/></td>
<td><input type="number" name='price[]' placeholder='' class="form-control price" onKeyUp="format(this)" onChange="format(this)" step="0" min="0"/></td>
<td><input type="number" name='total[]' placeholder='' class="form-control total" readonly/></td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12" style="padding-left:19px; padding-top:10px;">
<button type="button" id="add_row" class="btn btn-default pull-left" >+ Producto</button>
<button type="button" id='delete_row' class="pull-right btn btn-default">- Producto</button>
</div>
</div>
<div class="row clearfix" style="margin-top:20px">
<div class="pull-right col-md-4">
<table class="table table-bordered table-hover" id="tab_logic_total">
<tbody>
<tr>
<th class="text-center">Descuento</th>
<td class="text-center"><input type="number" name='descuento' placeholder='' class="form-control" id="descuento"/></td>
</tr>
<tr>
<th class="text-center">Total</th>
<td class="text-center"><input type="number" name='sub_total' placeholder='' class="form-control" id="sub_total" readonly/></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</form></td>
</tr>
<tr>
<td height="15" bgcolor="#F0F1F2"> </td>
</tr>
<tr>
<td height="15" bgcolor="#999999"> </td>
</tr>
</table>