0

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. 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>

4
  • ¿Por qué agregas varias versiones de JQuery? Tenías la 2.1.1, la 1.3.2 y la 3.1.1 en el código original. En la edición eliminé esas dependencias y coloqué solo la 3.7.1 (la última que sale en el editor de snippet) y select2 v4.1.0. Verifiqué que no hubo cambios en el resultado de la ejecución.
    – aeportugal
    Commented el 21 ago. a las 20:52
  • Saludos. El separador de decimal corresponde a la configuración del navegador (conforme al mismo el separador puede ser el punto o la coma); verifica y usa para validar el separador de decimales de la configuración. Commented el 22 ago. a las 0:00
  • si entiendo y mil gracias por tu ayuda.. pero por que no sale en el Total y V total el valor con el separador? y como hago para que en el campo descuento al poner alli un numero le reste la cantidad al Total
    – Eduardo
    Commented el 22 ago. a las 2:46
  • he hecho la modificación a este post.. pues lo que deseo es que se haga el calculo sin importar los decimales, ya que usando estos el calculo se hace mal y no se por que no me permite agregar cifras grandes...
    – Eduardo
    Commented el 12 sept. a las 22:16

1 respuesta 1

0

En base a mi experiencia, cambiar el valor de un input mientras se va escribiendo es una mala idea, siempre aparecen casos de bordes que originan errores.

Recomiendo siempre que se pueda utilizar un <input type="number"> y luego obtener su valor utilizando la propiedad input.valueAsNumber. El input, al ser una entrada no debería tener formato (lo mismo pasa al guardarlo en la base datos).


No obstante, en números grandes es común el error de ingresar un valor incorrecto al no contar con un separador de miles. Por lo que puede ser necesario aplicar dicha mala idea.

Lo primero es que debes cambiar de input="number" a input="text", ya que un número con formato es un string.

Luego el desafío es encontrar estos separadores, teniendo en cuenta que según la configuración regional estos separadores cambian

const separadores = function(){
    const test = 111111.111;
    const FN = new Intl.NumberFormat();
    const decimal = FN.formatToParts(test)
        .find(part => part.type === 'decimal')
        .value;
   
    const formateado = FN.format(test);
    const miles =  formateado.match(/[^0-9]/)[0];
    
    return {decimal, miles};
}();

console.log(separadores)

Para encontrar estos separadores usamos un número de test (en el código 111111.111) este número debe tener una parte decimal y ser lo suficientemente grande para que tenga separador de miles, y para encontrar estos separadores usamos 2 técnicas distintas para cada caso:

  • Separador decimal: Se usa el API Intl y la función formatToParts(), que entregará las partes del número, una de ellas será el separador decimal
  • Separador de miles: Se convierte el número a un string con formato, y luego buscamos el primer carácter que NO sea un número (ormateado.match(/[^0-9]/)[0])

Finalmente es necesario una función que pase un número a string con formato (llamada format) y otra función que haga lo inverso, es decir que pase un string con formato a número nuevamente (llamada toNumber). Dejo las explicaciones en comentario

const input = document.getElementById("input");
input.addEventListener("input",format);

const separadores = function(){
    const test = 111111.111;
    const FN = new Intl.NumberFormat();
    const decimal = FN.formatToParts(test)
        .find(part => part.type === 'decimal')
        .value;
   
    const formateado = FN.format(test);
    const miles =  formateado.match(/[^0-9]/)[0];
    
    return {decimal, miles};
}();


//funcion que pasa un número a string con formato
function format(ev){
/*
  Digamos que quieres escribir caracter a caracter, ejemplo: 12,3
  tienes que escribir paso a paso:
  1 -> tienes 1 (sin problema es un número valido)
  2 -> tienes 12 (sin problema es un número valido)
  , -> tienes 12, (error, porque "12," no es número, esto origina que no puedas seguir escribiendo)
  
  Para solucionar esto, evaluamos si el último caracter escrito es separador 
  de miles o decimal, y si ese es el caso no hacemos nada
  
*/
  if(ev.target.value.at(-1) === separadores.decimal || ev.target.value.at(-1) === separadores.miles){
   return;
  }
  
  //convertimos el value a número
  const numero = toNumber(ev.target.value);

  //si no es número, lanzamos error
  if(isNaN(numero)){
    alert("Error");
    ev.target.value = "";
    return;
  }
  
  //formateamos el número, es posible simplificarlo a
  //const formateado = numero.toLocaleString()
  //pero es posible que redondee la cantidad de número decimales
  //según la configuración regional. Para evitar esto, se declara 
  //expresamente que la cantidad de decimales son 20
  const formateado = numero.toLocaleString(undefined, { 
    minimumFractionDigits: 0, 
    maximumFractionDigits: 20
  });
  ev.target.value = formateado;
}

//función que pasa el string con formato a número
//esto se realiza simplemente eliminando los separadores de miles y reemplanzado
//el seperador decimal por el punto, que es el separador decimal en javascript
function toNumber(valor){
  return Number(valor
                 .replaceAll(separadores.miles, "")
                 .replaceAll(separadores.decimal,".")
                )
}
function multiplicar(){
  console.log(toNumber(input.value) * 2);
}
<input id="input">
<button onclick="multiplicar()"> multiplicar x2</button>

No olvidar que para realizar cálculos debes convertir a número nuevamente utilizando la función toNumber, te dejé un ejemplo con ello

1
  • mil gracias pro tu ayuda, y tienes mucha razón, pero a muchas personas les guata ir viendo el calculo en automático en estos sistemas asi
    – Eduardo
    Commented el 22 ago. a las 12:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.