Tengo el siguiente código

$(document).ready(function () {
    $('#big_1').change(function () {
        var bigAmt = document.getElementById("big_1").value
            + document.getElementById("big_2").value
            + document.getElementById("big_3").value
            + document.getElementById("big_4").value
            + document.getElementById("big_5").value
            + document.getElementById("big_6").value
            + document.getElementById("big_7").value 
            + document.getElementById("big_8").value
            + document.getElementById("big_9").value
            + document.getElementById("big_10").value;

        var elem = document.getElementById("totalBig");
        elem.value = bigAmt;
    });
});

De hecho, quería agregar el valor de big_1 a big_10 en el cambio de valor de texto de entrada de "big_1 a big_10", ya sea que 1 del campo de texto cambie su valor, esto debería ser invocado.

A partir de ahora solo corro en big_1 change event.

Obtengo un error de JavaScript al agregar de esta manera, creo que la forma en que los agrego es bastante desordenada.

¿Qué debo hacer para cambiar mi código para poder resumir?

Big_1 a big_10 valor de campo de texto, y en el cambio de big_1 a big_10 (cualquiera de ellos), invocará esto y cambiará span id = "totalBig" al valor de su suma (big_1 agregue hasta big_10)

A continuación se muestra mi código extra editado:

<input type="number" data-bv-digits-message="true" data-bv-threshold="1" min="0" class="form-control" name="big_1" id="big_1" size="6">

<input type="number" data-bv-digits-message="true" data-bv-threshold="1" min="0" class="form-control" name="big_2" id="big_2" size="6">


all the way until big_10

Quiero cambiar el valor de cualquiera de este big_Identifier (1-10), lo resumirá y cambiará mi

<div class="well">
Total Big: <span id="totalbig">0</span> &nbsp;&nbsp;&nbsp;&nbsp;</span> 
</div>

Probé el

<script type="text/javascript">
$(document).ready(function() {
$('#html5Form').bootstrapValidator();
    $('.big').change(function() { 
        var bigAmt = "";

        $('.big').each(function () {
            bigAmt += $(this).val();    
        })

        var elem = document.getElementById("totalBig");
alert(bigAmt);
        elem.value = bigAmt;
    });
});
</script>

No ejecuta ninguna alerta cuando se cambia alguno de los valores big_.

0
user3412075 27 ago. 2014 a las 22:54

5 respuestas

La mejor respuesta

Sería mucho mejor si agregara una clase big a cada <input id="big_NUMBER">. Entonces podrías hacer esto:

$(document).ready(function() {
    $('.big').change(function() { 
        var bigAmt = 0;

        $('.big').each(function () {
            bigAmt += Number($(this).val());    
        })

        $("#totalBig").val(bigAmt);
    });
});

Eso es mucho más limpio y fácil de entender que lo que tenía.

Para que esto funcione, deberá agregar una clase a todas sus entradas:

<input type="number" data-bv-digits-message="true" data-bv-threshold="1" min="0" class="form-control big" name="big_2" id="big_2" size="6"><!-- Notice the big class-->

Esta es la mejor manera de agrupar todas sus entradas. Todos están relacionados, por lo que deberían compartir una clase. No debería llamar a múltiples identificadores para una funcionalidad tan similar.

4
Jorge Silva 27 ago. 2014 a las 19:13

Si está usando jquery, úselo correctamente, le hará la vida mucho más fácil.

Esto funcionará exactamente para usted en su caso

$(document).ready(function() {
    $('[id^="big"').change(function(){
        var total = (+$('#totalBig').val());
        var currentVal = (+$(this).val());
        total += currentVal;
        $('#totalBig').val(total)
    })
});

Demo

1
Mritunjay 27 ago. 2014 a las 19:13

Agregue class="bigs" a todas las entradas y luego intente esto:

$(document).ready(function () {
    var intTotalBig;
    $('.bigs').change(function () {
        intTotalBig = 0;
        $('.bigs').each(function(){
            $thisVal = $(this).val();
            if ($.isNumeric($thisVal)){
                intTotalBig += parseInt($thisVal, 10);
            }
        });
        $("#totalBig").val(intTotalBig);
    });
});

Este código verifica todas las entradas en cada cambio y suma todas las que tienen un valor numérico e ignora los valores vacíos o sin valores numéricos.

Comprobar demostración de JSFiddle

0
Moshtaf 27 ago. 2014 a las 19:08

Supervisa el evento de cambio en todo el texto del tipo de entrada de la siguiente manera:

$('input:text').change(
function () {
    alert('text changed of any text box.');
    //You can doo your code here.
});

O...

Si desea agregar el monitor a los cuadros de texto seleccionados, entonces deberá agregar cualquier clase de CSS a los cuadros de texto seleccionados y luego monitorear esos cuadros de texto a través de la clase de la siguiente manera:

$('.yourclass').change(
function () {
    alert('text changed of any text box.');
    //You can doo your code here.
});

Este evento de cambio se activará cuando pierda el foco del cuadro de texto después de cambiar el texto ...

Pero si desea perder el foco (es decir, si desea actualizar el conteo mientras escribe), entonces debe usar el evento keyup como se indica en esta respuesta.

0
Community 23 may. 2017 a las 12:27
$(document).ready(function() {
    $('#big_1').change(function() {
        var divArray = ["big_1","big_2","big_3","big_4","big_5","big_6","big_7","big_8","big_9","big_9","big_10"];
        var bigAmt = 0;

        for(var i = 0, n = divArray.length;i<n;i++)
        {
            bigAmt += parseInt($("#" + divArray[i]).val(),10);
        }   
        $("#totalBig").val(bigAmt);
    });
});

Pruebe lo anterior, debe hacer lo que está buscando. Probablemente también desee usar parseInt en caso de que la entrada no sea del tipo "número".

* editar, olvidé el # para la identificación.

* editar, comentario eliminado acerca de considerar el uso de funciones jquery porque las personas son realmente sensibles.

0
Christopher 27 ago. 2014 a las 19:13