Mostrando entradas con la etiqueta jquery. Mostrar todas las entradas
Mostrando entradas con la etiqueta jquery. Mostrar todas las entradas

lunes, 30 de enero de 2012

Sumar varios campos usando Jquery

El problema es el siguiente:

Tengo varios campos (inputs) de valores que debo agregar dinámicamente.  y estos valores deben ser sumados en un campo  TOTAL.

Una solución con JQuery es la siguiente:


   $('.valorequipo').live('keyup',function(){
       var add = 0;
        $('.valorequipo').each(function(){
            add += Number($(this).val());
         
        });
         $('#CompraTotalcompra').val(add);
    });
En este caso todos los inputs que quiero sumar de ben tener la clase "valorequipo".
Nótese que en lugar de "bind()" se usa "live()". Esto es por que los campo se van agregando dinámicamente. Si se usara bind(), solo se sumarían los campos presente en el formulario al momento de ejecutar el script.

martes, 20 de diciembre de 2011

Filtrar contenido de un combobox (dropdown list) con jquery

Hace poco me encontre con este problema.

Tenia una lista de unos 6000 elementos y necesitaba que los usuario pudieran buscar rapidamente el elemento que necesitaban seleciionar.

Lo primero que pensé hacer fue usar la opción de combobox del autocomplete de Jquery UI sin muy buenos resultados. No sé que hice mal pero no me renderizaba la lista  ni siquiera pude hacer funcionar el ejemplo. asi que decidí tomar un poco de tiempo y hacer un scirpt para esto. El resultado fue más o menos el siguiente:
 <input type="text" id="input"> </input>
 <select name="datoaenviar" id="RemisionEquipoId">
<option value=""></option>
</select>
<select name="datosreferencia" class="hidden" id="RemisionEquipos">
<option value="1">Dato 1</option>
 <option value="2">otro dato</option>
<option value="3">un dato mas</option>
<option value="n">y asi sucesivamente</option>
</select>
  $("#input").bind('keyup', function(){
        $("#RemisionEquipoId").empty();
        var palabra = $(this).val().toUpperCase();
        $("#RemisionEquipos option")
        .filter(function(index){
            return $(this).text().toUpperCase().indexOf(palabra) >= 0 ;
        }).show()
        .clone()
        .appendTo('#RemisionEquipoId');
     
        $('#RemisionEquiposId option:eq(0)').attr("selected", "selected");
    });
El select "datosreferencia" está oculto y contiene todos los datos a filtrar. A medida que en "input" se escribe se van seleccionando los "options" que contengan el texto que se escribe en "input". Cada vez que se presiona una tecla se vacian los datos del select "datosenviar" y se agregan los que cumplan con el criterio.

No es una solución muy elegante pero es sencilla y eficaz.