Skip to main content
se eliminaron 730 caracteres en el cuerpo
Origen Enlace
Eduardo
  • 375
  • 1
  • 9
  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"name="conducct" type="hidden" id="nombre"id="conducct" value="<?php echo $nombre$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">&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='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    <td>
                        <!----<input type="number" name='price[]' placeholder='' class="form-control price" step="0" min="0" onKeyUp="format(this)" onChange="format(this)"/>--->
 step="0" min="0"                     <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">Descuento<center">Total</th>
                        <td class="text-center"><input type="number" name='descuento'name='sub_total' placeholder='' class="form-control" id="descuento"id="sub_total" readonly/></td>
                </tr>
                <tr></tr>
                    <th class="text-center">Total<</th>tbody>
                    <td class="text-center"><input type="number" name='sub_total' placeholder='' class="form-control" id="sub_total" readonly/><</td>table>
                </tr>div>
                </tbody>
            </table>div>
            </div>
          </div>form></td>
        </div>tr>
    </form></td>
  </tr>
  <tr>
          <td height="15" bgcolor="#F0F1F2">&nbsp;</td>
        </tr>
        <tr>
          <td height="15" bgcolor="#999999">&nbsp;</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>
  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>
  1. Haga el calculo sin problemas.
  2. Que en el resultado aparezca este valor así con ese formato igual al ir sumando.
  3. 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">&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='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">&nbsp;</td>
        </tr>
        <tr>
          <td height="15" bgcolor="#999999">&nbsp;</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>
Mejora de título, formato y ortografía
Origen Enlace
aeportugal
  • 10.6k
  • 2
  • 12
  • 24

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

nuevamenteNuevamente con este caso que no he podido solucionar que aunque se escriban en las casillas numero así por ejemplo 1.500 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.

entoncesEntonces me gustaría que:

  1. haga el calculo sin problemas.

    Haga el calculo sin problemas.
  2. también que en el resultado aparezca este valor así con ese formato igual al ir sumando..

    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.

    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.

    " size="40"> " size="40"> " size="40">   Producto Cantidad V. Unitario V. Total 1 + Producto - Producto Descuento Total     $(document).ready(function() No entiendo por que la función { 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>
     <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>
    
    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>

calculo matematico 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. también 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.

    " size="40"> " size="40"> " size="40">   Producto Cantidad V. Unitario V. Total 1 + Producto - Producto Descuento Total     $(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>
     <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>
    

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>

Origen Enlace
Eduardo
  • 375
  • 1
  • 9

calculo matematico 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. también 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.

    " size="40"> " size="40"> " size="40">   Producto Cantidad V. Unitario V. Total 1 + Producto - Producto Descuento Total     $(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>
     <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>