Skip to main content
2 de 3
Mejora de título, formato y ortografía
aeportugal
  • 10.6k
  • 2
  • 12
  • 24

Cálculo matemático sin importar decimales y campo descuento

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:

  1. Haga el calculo sin problemas.
  2. Que en el resultado aparezca este valor así con ese formato igual al ir sumando.
  3. Le añadí un input llamado Descuento en el cual se ingresa un valor que se debe descontar a la suma general que haya.
  4. 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">&nbsp;</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">&nbsp;</td>
  </tr>
  <tr>
    <td height="15" bgcolor="#999999">&nbsp;</td>
  </tr>
</table>

Eduardo
  • 375
  • 1
  • 9