2

Tengo algunos problemas con mi código javascript al momento de sumar valores de varios textbox. Sólo esta sumando valores enteros.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DEMO</title>    
</head>

<body>
    <form runat="server">
        <asp:TextBox ID="txt1" runat="server" Class="test" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"></asp:TextBox>
        <asp:TextBox ID="txt2" runat="server" CssClass="TextBoxBorder" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"></asp:TextBox>
        <asp:TextBox ID="txt3" runat="server" CssClass="TextBoxBorder" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"></asp:TextBox>
        <br />
        Total<br />
        <asp:TextBox ID="txt4" runat="server" CssClass="TextBoxBorder" Width="70px" onkeyup="format(this)"></asp:TextBox>


    </form>
</body>

<script>
    function agregar_numero() {

        var TextBox1 = parseFloat(document.getElementById("txt1").value);
        var TextBox2 = parseFloat(document.getElementById("txt2").value);
        var TextBox3 = parseFloat(document.getElementById("txt3").value);
        var result = TextBox1 + TextBox2 + TextBox3;
        result.toFixed(2);
        document.getElementById("txt4").value = result;
    }
</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>
</html>
5
  • Intenta usando la clase numberformat y/o intenta inicializar las variables como var textbox = parseFloat(0);
    – Neobugu
    Commented el 23 mar. 2016 a las 16:06
  • Cual es el objetivo de los regex? Commented el 23 mar. 2016 a las 16:07
  • @CarlosMuñoz gracias por responder es para que separen el numero que estoy ingresando en el textbox ejemplo: 100000 = 100.000
    – IronHeart
    Commented el 23 mar. 2016 a las 16:15
  • Y es ahí donde te estás volando el punto decimal? Commented el 23 mar. 2016 a las 16:17
  • @CarlosMuñoz si , solo suma los enteros no se porque, además me gustaría sumar millones tambien
    – IronHeart
    Commented el 23 mar. 2016 a las 16:21

1 respuesta 1

3

Hay varias cosas que puede crear problemas con el JavaScript de la pregunta:

  • Se hace parseFloat de los campos incluso cuando están vacíos, lo que resulta en un NaN y un total no esperado. Lo ideal sería que si el campo está vacío y el valor va a ser NaN se utilizase 0 en su lugar.

    Para lograr esto añade un || 0 en la asignación:

    var TextBox1 = parseFloat(document.getElementById("txt1").value) || 0;
    var TextBox2 = parseFloat(document.getElementById("txt2").value) || 0;
    var TextBox3 = parseFloat(document.getElementById("txt3").value) || 0;
    
  • Se hace parseFloat sin preprocesar el campo, lo cual puede dar problemas con el formato que usas. Por ejemplo: imagina que tienes el valor 1234, que formateado se ve 1.234; cuando haces parseFloat de 1.234, el navegador considera que 1 es la parte entera y 234 son decimales, cuando realmente lo que quieres es todo como parte entera.

    Para solucionar esto, utiliza replace() de la misma manera que lo usas en la función de formato, de este modo se estará procesando correctamente como entero:

    var TextBox1 = parseFloat(document.getElementById("txt1").value.replace(/\./g, ''));
    var TextBox2 = parseFloat(document.getElementById("txt2").value.replace(/\./g, ''));
    var TextBox3 = parseFloat(document.getElementById("txt3").value.replace(/\./g, ''));
    
  • Cuando se cambia el valor del total, no se está formateando como los otros campos. Simplemente añade una llamada a la función format pasándole como valor el elemento con el total:

    format(document.getElementById("txt4"));
    

Combinando todos estos cambios, el código se vería como en esta demo:

function agregar_numero() {
  // quitas los puntos (para evitar problemas con los decimales) e inicializa a 0 si el campo esta vacio 
  var TextBox1 = parseFloat(document.getElementById("txt1").value.replace(/\./g, '')) || 0;
  var TextBox2 = parseFloat(document.getElementById("txt2").value.replace(/\./g, '')) || 0;
  var TextBox3 = parseFloat(document.getElementById("txt3").value.replace(/\./g, '')) || 0;
  var result = TextBox1 + TextBox2 + TextBox3;
  result.toFixed(2);
  document.getElementById("txt4").value = result;
  
  // formatea el resultado para que aparezca igual que los otros numeros
  format(document.getElementById("txt4"));
}

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, '');
  }
}
<input id="txt1" class="test" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"/>
<input id="txt2" class="TextBoxBorder" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"/>
<input id="txt3" class="TextBoxBorder" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"/>
<br />
Total<br />
<input id="txt4" class="TextBoxBorder" Width="70px" onkeyup="format(this)"/>


Actualización: Me preguntaron cómo se haría algo similar pero en lugar de utilizando puntos, usando comas para la separación de los miles y dejando el punto para los decimales. Por ejemplo, para admitir números como 123,123,123.12

Los cambios para lograr eso son sencillos:

  • Actualizar todas las sustituciones y expresiones regulares de . a , (hay bastantes).
  • En la función que formatea los números:
    • Separar la parte entera y los decimales
    • Hacer todas las operaciones de formateo con la parte entera
    • Volver a añadir la parte decimal después de formatear la entera

El resultado final quedaría así:

function agregar_numero() {
  // quitas los puntos (para evitar problemas con los decimales) e inicializa a 0 si el campo esta vacio 
  var TextBox1 = parseFloat(document.getElementById("txt1").value.replace(/,/g, '')) || 0;
  var TextBox2 = parseFloat(document.getElementById("txt2").value.replace(/,/g, '')) || 0;
  var TextBox3 = parseFloat(document.getElementById("txt3").value.replace(/,/g, '')) || 0;
  var result = TextBox1 + TextBox2 + TextBox3;
  //console.log(TextBox1 + "__" + TextBox2 + "__" + TextBox3 + "__" + result);
  result.toFixed(2);
  document.getElementById("txt4").value = result;

  // formatea el resultado para que aparezca igual que los otros numeros
  format(document.getElementById("txt4"));
}

function format(input) {
  var num = input.value.replace(/\,/g, '');
  var decimales = "";
  if (num.indexOf(".") >= 0) { 
    decimales = "." + num.split(".")[1].substring(0,2); // sólo nos quedamos con los dos primeros decimales
    num = Math.floor(num); // redondeamos hacia abajo para quedarnos con la parte entera
  }
  if (!isNaN(num)) {
    num = num.toString().split('').reverse().join('').replace(/(?=\d*\,?)(\d{3})/g, '$1,');
    // añadir los decimales al final!
    num = num.split('').reverse().join('').replace(/^[\,]/, '') + decimales;
    input.value = num;
  }
  else {
    alert('Solo se permiten numeros');
    input.value = input.value.replace(/[^\d\,\.]*/g, '');
  }
} 
<input id="txt1" class="test" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"/>
<input id="txt2" class="TextBoxBorder" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"/>
<input id="txt3" class="TextBoxBorder" Width="70px" onkeyup="agregar_numero();format(this)" onchange="format(this)"/>
<br />
Total<br />
<input id="txt4" class="TextBoxBorder" Width="70px" onkeyup="format(this)"/>

1
  • Gracias por darte la molestia de escribir comentarios me sirvio de mucho y nuevamente gracias por tu tiempo!
    – IronHeart
    Commented el 23 mar. 2016 a las 19:25

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.