60 EVENTOS DEL TECLADO KEYUP PARA CALCULAR EL STOCK TOTAL en SISTEMA DE VENTAS(PHPyMySql)FullStack

Duración: 10 min
Módulo: 💰 Implementación y Registro del Módulo de Compras Lección 12 de 17

Descripción

Lección 60: Cálculo Dinámico del Stock Total con Eventos de Teclado (jQuery) ⌨️➕

Esta lección clave finalizó la funcionalidad del formulario de registro de compras al implementar la lógica de cálculo automático del stock total, utilizando eventos del teclado con jQuery para ofrecer una experiencia de usuario fluida y en tiempo real.

1. Preparación del Campo de Cantidad de Compra 🛒

Antes de la implementación del script, se ajustó el input de la cantidad:

  • Identificador Único: Se le asignó el ID cantidad_compra [03:05].
  • Tipo de Entrada: Se definió el campo como de tipo number (type="number") para restringir la entrada solo a valores numéricos [02:33].
  • Estilizado: Se centró el texto (text-align: center) para mejorar la presentación [02:13].

2. Evento keyup para el Cálculo en Tiempo Real 🚀

Para realizar la suma de stock de forma instantánea mientras el usuario teclea, se utilizó el evento keyup de jQuery:

  • Evento keyup: Este evento se dispara cada vez que una tecla es soltada dentro del campo cantidad_compra [03:54]. Esto permite que el cálculo se ejecute inmediatamente después de que el usuario termina de ingresar un dígito.
  • Función de Cálculo: Dentro de este evento, se implementó la siguiente lógica:
    1. Rescate de Variables:
      • Se obtiene el valor del Stock Actual (campo deshabilitado).
      • Se obtiene el valor ingresado en la Cantidad de Compra [00:05:08 - 00:05:53].
    2. Conversión a Entero (parseInt): Dado que JavaScript/jQuery trata los valores recuperados de los inputs como strings (cadenas de texto), si se sumaran directamente, los concatenaría (Ej: "50" + "5" = "505"). Para realizar una suma matemática correcta, se utiliza la función parseInt() para convertir ambos strings a números enteros [07:16].
    3. Cálculo Total: Se realiza la suma matemática: total = parseInt(stock_actual) + parseInt(cantidad_compra) [07:33].
    4. Asignación del Resultado: El resultado de la suma (total) se asigna inmediatamente al campo deshabilitado Stock Total mediante la propiedad .val() de jQuery [08:21].

3. Preparación para el Guardado Final 💾

Con esta funcionalidad implementada, el campo Stock Total contiene ahora el valor que el sistema debe guardar en la base de datos para actualizar el inventario del producto.

  • Stock Total como Valor a Actualizar: El sistema no solo registrará la compra, sino que también tomará el valor del Stock Total (la suma del stock existente más la cantidad comprada) para actualizar el campo de stock del producto en la tabla de almacén (almacen) [09:39].

El formulario está ahora completamente funcional. El próximo video se centrará en el desarrollo del controlador en PHP para procesar toda la información, guardarla en la tabla de compras y, finalmente, ejecutar la actualización del stock del producto en la base de datos [10:06].