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.
- No entiendo por que la función
function format(input)
que pone el separador de decimales no me permite escribir cifras grandes.
<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="conducct" type="hidden" id="conducct" value="<?php echo $conductorgrua ?>" 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='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" step="0" min="0" onKeyUp="format(this)" onChange="format(this)"/>--->
<input type="number" name='price[]' placeholder='' class="form-control price" onKeyUp="format(this)" onChange="format(this)"/>
</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">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>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
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>
<script>
$(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));
}
</script>