5. Creating js function to submit the image form

 

Creando Funciones JavaScript/jQuery para Formularios

📚 Tema del Tutorial:

"Interactividad Web: Cómo Hacer que los Formularios Reaccionen con JavaScript/jQuery"

🎯 Objetivo de Aprendizaje

Al final de este tutorial entenderás:

  • Cómo usar jQuery para manipular formularios

  • Cómo mostrar/ocultar elementos dinámicamente

  • Cómo enviar formularios automáticamente

  • La diferencia entre HTML estático y JavaScript dinámico

📂 Parte 1: Entendiendo el Problema

¿Qué queremos lograr?

Imagina un formulario como un buzón de correos:

  • HTML básico = Buzón vacío (solo recibe cartas)

  • HTML + JavaScript = Buzón inteligente (avisa cuando llega una carta)

Problema actual:

text

Usuario selecciona archivo → NADA PASA

Solución deseada:

text

Usuario selecciona archivo → ✅ Muestra animación → ✅ Envía automáticamente

Archivos clave que vamos a modificar:

  1. index.php ← Donde añadimos JavaScript

  2. index.html ← Referencia del diseño inicial

🛠️ Parte 2: Herramientas que Vamos a Usar

jQuery - Tu "Asistente Digital"

jQuery es como un asistente personal para JavaScript:

  • JavaScript puro = Tienes que hacer TODO manualmente

  • jQuery = Tienes un asistente que hace el trabajo por ti

Ejemplo comparativo:

javascript

// JavaScript puro (más complejo)

document.getElementById('file-upload').addEventListener('change', function(){

    // código aquí

});


// jQuery (más simple)

$("#file-upload").change(function(){

    // código aquí

});

Ventajas de jQuery:

  • ✅ Más fácil de escribir

  • ✅ Compatible con todos los navegadores

  • ✅ Muchas funciones pre-hechas

  • ✅ Ideal para principiantes

🔄 Parte 3: Flujo de Trabajo Paso a Paso

Paso 1: Identificar los Elementos Clave

Esquema visual de nuestro formulario:

text

🎨 FORMULARIO VISUAL (frontend)

├── 📄 Contenido principal (visible)

│   ├── 🖼️ Imagen banner

│   ├── 📝 Descripción

│   ├── 🟢 Botón "Upload File" ← ¡Esto es un LABEL!

│   └── 📤 Input oculto (type="file")

└── 🔄 Loader (inicialmente oculto)

    ├── 🌀 GIF animado

    └── 📝 Texto "Uploading...."

Código HTML relevante:

html

<!-- LOADER (OCULTO inicialmente) -->

<div id="loader" class="hidden">...</div>


<!-- CONTENIDO PRINCIPAL (VISIBLE inicialmente) -->

<div id="upload">...</div>


<!-- FORMULARIO OCULTO -->

<form id="form" method="post" enctype="multipart/form-data">

    <input id="file-upload" type="file" name="file">

</form>


<!-- BOTÓN QUE ACTIVA EL INPUT -->

<label for="file-upload">Upload File</label>

Paso 2: Entender Cómo Funciona el Label

Truco importante:

  • El <label> está CONECTADO al <input> mediante for="file-upload"

  • Cuando haces clic en el label, ¡activa el input file!

Analogía:

text

[🖱️ CLIC en "Upload File"] → [🏷️ LABEL] 

    ↓ (gracias al atributo "for")

[📤 INPUT FILE se activa] → [📁 Selector de archivos aparece]

⚡ Parte 4: Creando Nuestra Función jQuery

Paso 3: Estructura Básica de jQuery

Plantilla básica:

javascript

$(document).ready(function(){

    // Tu código aquí

    // Esto se ejecuta CUANDO LA PÁGINA ESTÉ LISTA

});

¿Por qué $(document).ready()?
Imagina que la página web es una casa que se está construyendo:

  • Sin ready() = Intentas decorar mientras construyen paredes ❌

  • Con ready() = Esperas a que la casa esté terminada ✅

Paso 4: Detectar Cambios en el Input File

Código explicado línea por línea:

javascript

$("#file-upload").change(function(){

    // "Cuando el input con ID 'file-upload' CAMBIE..."

    // (esto pasa cuando el usuario selecciona un archivo)

});

Desglose visual:

text

👤 USUARIO: Selecciona archivo

    ↓

🎯 jQuery: ¡Detecta el cambio!

    ↓

🚀 Ejecuta: La función que escribimos

Paso 5: Verificar que Realmente Hay un Archivo

javascript

if(this.files.length > 0){

    // "Si la lista de archivos tiene MÁS de 0 elementos..."

    // (esto significa que hay al menos 1 archivo seleccionado)

}

Analogía del supermercado:

  • this.files = Tu carrito de compras

  • .length = Cuántos productos hay en el carrito

  • > 0 = ¿Tienes al menos 1 producto?

🎭 Parte 5: Mostrando y Ocultando Elementos

Paso 6: Manipulando Clases CSS con jQuery

Concepto clave: La clase hidden en Tailwind CSS

Código para mostrar el loader:

javascript

$("#loader").removeClass('hidden');

// "Quítale la clase 'hidden' al elemento con ID 'loader'"

Código para ocultar el contenido principal:

javascript

$("#upload").addClass('hidden');

// "Añádele la clase 'hidden' al elemento con ID 'upload'"

Esquema visual del cambio:

text

ANTES de seleccionar archivo:

├── 🎭 #upload: VISIBLE (sin clase hidden)

└── 🌀 #loader: OCULTO (con clase hidden)


DESPUÉS de seleccionar archivo:

├── 🎭 #upload: OCULTO (con clase hidden)

└── 🌀 #loader: VISIBLE (sin clase hidden)

Paso 7: Enviando el Formulario Automáticamente

javascript

$("#form").submit();

// "Envía el formulario con ID 'form'"

¿Por qué necesitamos esto?
Normalmente necesitarías un botón "Enviar". Nuestra solución:

text

👤 Usuario selecciona archivo → 🤖 JavaScript envía automáticamente

🧩 Parte 6: Código Completo Explicado

Código final con explicaciones:

javascript

$(document).ready(function(){

    // ESPERAR a que la página esté completamente cargada

    

    $("#file-upload").change(function(){

        // VIGILAR: Cuando el input file cambie

        

        if(this.files.length > 0){

            // VERIFICAR: ¿Hay realmente un archivo seleccionado?

            

            $("#loader").removeClass('hidden');   // 🌀 MOSTRAR loader

            $("#upload").addClass('hidden');      // 🎭 OCULTAR contenido

            $("#form").submit();                  // 📤 ENVIAR formulario

        }

    });

});

Diagrama de flujo del código:

text

[📄 PÁGINA SE CARGA]

    ↓

[🔧 jQuery LISTO para trabajar]

    ↓

[👁️ VIGILANDO input file]

    ↓ (usuario selecciona archivo)

[✅ DETECTA cambio]

    ↓

[🔍 VERIFICA: ¿archivo seleccionado?]

    │

    ├── SI → [🌀 MUESTRA loader] → [🎭 OCULTA contenido] → [📤 ENVÍA]

    │

    └── NO → [⏸️ Nada pasa]

🎨 Parte 7: Ejercicio Práctico - Crea Tu Propia Función

Ejercicio 1: Formulario de Contacto con Validación

HTML:

html

<form id="contact-form">

    <input id="email" type="email" placeholder="Tu email">

    <div id="email-error" class="hidden" style="color: red;">

        Email inválido

    </div>

    <button type="submit">Enviar</button>

</form>

jQuery para practicar:

javascript

$(document).ready(function(){

    $("#email").keyup(function(){

        // Cuando el usuario escribe en el email...

        var email = $(this).val();

        

        if(email.includes("@")){

            // Si el email tiene @

            $("#email-error").addClass('hidden'); // Oculta error

        } else {

            // Si NO tiene @

            $("#email-error").removeClass('hidden'); // Muestra error

        }

    });

});

Ejercicio 2: Contador de Caracteres

Código para añadir:

html

<textarea id="mensaje" maxlength="100"></textarea>

<div>

    Caracteres: <span id="contador">0</span>/100

</div>

jQuery:

javascript

$("#mensaje").keyup(function(){

    var longitud = $(this).val().length;

    $("#contador").text(longitud);

    

    if(longitud > 90){

        $("#contador").css("color", "red");

    } else {

        $("#contador").css("color", "black");

    }

});

🔍 Parte 8: Depuración - ¿Y si No Funciona?

Problemas Comunes y Soluciones:

Problema 1: "jQuery no está cargado"
Síntoma: $ is not defined en consola
Solución: Verifica que tienes esta línea:

html

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Problema 2: "IDs no coinciden"
Síntoma: Nada pasa al seleccionar archivo
Solución: Verifica que los IDs sean exactos:

html

<!-- HTML -->

<input id="file-upload" type="file">


<!-- jQuery (DEBE coincidir) -->

$("#file-upload")  // ← Correcto

$("#fileUpload")   // ← Incorrecto (mayúscula diferente)

Problema 3: "El loader no se muestra"
Solución:

  1. Verifica que loader.gif existe en frontend/images/

  2. Comprueba que las rutas sean correctas

  3. Usa la consola del navegador (F12) para ver errores

📊 Parte 9: Comparación - jQuery vs JavaScript Puro

Tarea

JavaScript Puro

jQuery

Esperar a que cargue la página

window.onload

$(document).ready()

Seleccionar por ID

document.getElementById()

$("#id")

Añadir clase

element.classList.add()

$().addClass()

Quitar clase

element.classList.remove()

$().removeClass()

Escuchar cambios

addEventListener('change')

$().change()

Enviar formulario

form.submit()

$().submit()

Conclusión: jQuery es más fácil para principiantes 😊

🎮 Parte 10: Simulación Mental - Cómo Piensa jQuery

Paso a paso en "lenguaje humano":

  1. "Espera, no hagas nada todavía..."

  2. javascript

$(document).ready(function(){

    // Espera a que TODO esté listo

  1. });

  2. "Vigila ese input de archivos"

  3. javascript

$("#file-upload").change(function(){

    // Si alguien toca esto, avísame

  1. });

  2. "¿Realmente seleccionó algo?"

  3. javascript

if(this.files.length > 0){

    // Cuenta los archivos: ¿hay más de 0?

  1. }

  2. "¡Cambia la escena!"

  3. javascript

$("#loader").removeClass('hidden'); // Aparece el loader

  1. $("#upload").addClass('hidden');    // Desaparece el contenido

  2. "¡Acción!"

  3. javascript

  4. $("#form").submit(); // Envía todo al servidor

❓ Parte 11: Cuestionario de Evaluación

Pregunta 1:

¿Para qué sirve $(document).ready() en jQuery?
a) Para cargar la página más rápido
b) Para ejecutar código cuando la página está completamente cargada ✅
c) Para ocultar elementos automáticamente
d) Para enviar formularios

Explicación: Asegura que el código se ejecute solo cuando TODO el HTML esté listo.

Pregunta 2:

En este código, ¿qué hace $("#file-upload")?

javascript

$("#file-upload").change(function(){ ... });

a) Crea un nuevo input file
b) Selecciona el elemento con ID "file-upload" ✅
c) Cambia el valor del input
d) Oculta el elemento

Pregunta 3:

¿Qué verifica this.files.length > 0?
a) Si el archivo es muy grande
b) Si hay al menos un archivo seleccionado ✅
c) Si el archivo tiene extensión correcta
d) Si el usuario hizo clic

Pregunta 4:

¿Cuál es la función de .removeClass('hidden')?
a) Añade la clase 'hidden' a un elemento
b) Quita la clase 'hidden' de un elemento ✅
c) Cambia el color del elemento
d) Elimina el elemento completamente

Pregunta 5:

¿Por qué necesitamos $("#form").submit() si no hay botón de envío?
a) Para crear un botón automáticamente
b) Para enviar el formulario programáticamente ✅
c) Para validar los datos del formulario
d) Para cambiar el método del formulario

Pregunta 6:

En Tailwind CSS, ¿qué efecto tiene la clase hidden?
a) Hace el elemento transparente
b) Oculta completamente el elemento ✅
c) Cambia su posición en la página
d) Reduce su tamaño

Pregunta 7:

¿Qué pasa si el usuario selecciona un archivo y luego cancela?
a) El loader se muestra igualmente
b) Nada, porque files.length será 0 ✅
c) El formulario se envía vacío
d) Aparece un mensaje de error

Respuesta correcta: b) Si cancela, no hay archivos seleccionados (length = 0).

🏆 Resumen Final - Conceptos Clave

Las 5 Reglas de Oro de jQuery para Principiantes:

  1. 📍 Siempre espera: Usa $(document).ready() antes de todo

  2. 🎯 Selecciona correctamente: $("#id") para IDs, $(".clase") para clases

  3. 👂 Escucha eventos: .change(), .click(), .keyup() para interactividad

  4. 🎭 Manipula clases: .addClass(), .removeClass() para mostrar/ocultar

  5. 🚀 Automatiza: Envía formularios o realiza acciones automáticamente

Flujo Mental al Crear Interactividad:

text

1. 📝 Identifica: ¿Qué elemento quiero controlar? (ID/Clase)

2. 👂 Escucha: ¿Qué acción del usuario quiero detectar? (click, change, etc.)

3. ✅ Verifica: ¿Qué condiciones debo comprobar?

4. 🎭 Cambia: ¿Qué elementos debo mostrar/ocultar/modificar?

5. 🚀 Actúa: ¿Qué acción final debo realizar?

✅ Checklist de tu Función jQuery

✅ Código dentro de $(document).ready()
✅ Seleccionado correctamente $("#file-upload")
✅ Escuchando evento .change()
✅ Verificando if(this.files.length > 0)
✅ Mostrando loader $("#loader").removeClass('hidden')
✅ Ocultando contenido $("#upload").addClass('hidden')
✅ Enviando formulario $("#form").submit()
✅ Probado en navegador

🚀 Para Practicar Más - Ideas de Proyectos

  1. 🖼️ Galería de imágenes: Que muestre preview al seleccionar

  2. 📝 Formulario de registro: Con validación en tiempo real

  3. 🔄 Carrito de compras: Que actualice total automáticamente

  4. 🔍 Buscador: Que filtre resultados mientras escribes

  5. 🎮 Juego simple: Como piedra-papel-tijera

Ejemplo rápido - Preview de imagen:

javascript

$("#foto").change(function(){

    if(this.files && this.files[0]){

        var reader = new FileReader();

        reader.onload = function(e){

            $("#preview").attr('src', e.target.result);

        }

        reader.readAsDataURL(this.files[0]);

    }

});

📚 Recursos para Aprender Más

jQuery para seguir aprendiendo:

  1. .show() / .hide() - Mostrar/ocultar elementos

  2. .fadeIn() / .fadeOut() - Efectos de desvanecimiento

  3. .slideDown() / .slideUp() - Efectos deslizantes

  4. .animate() - Animaciones personalizadas

  5. .ajax() - Llamadas al servidor sin recargar página

Preguntas para explorar:

  • ¿Cómo harías para subir múltiples archivos?

  • ¿Qué seguridad necesitan los formularios?

  • ¿Cómo mejorarías la experiencia en móviles?

¡Excelente trabajo! 🎉 Has aprendido a dar vida a tus formularios con jQuery. Recuerda: la práctica es clave. ¡Empieza con proyectos pequeños y ve creciendo!

💡 Consejo final:
Cuando tu código no funciona:

  1. Abre la consola (F12 → Console)

  2. Busca errores en rojo

  3. Usa console.log() para ver valores

  4. Prueba una línea a la vez

  5. ¡No te rindas! Cada error es una oportunidad de aprender

🚀 ¡Ahora tus formularios son interactivos! El usuario ve feedback inmediato y la experiencia es mucho mejor

Comentarios

Publicar un comentario

Entradas más populares de este blog

1-7. Transforma tu audio a texto

https://docs.google.com/presentation/d/e/2PACX-1vQALlzBy_iPdW3SCPiIx-glkhsG4OKexjhqrRvQd8mGPiAfMWyRU8Vde9T7ygB-MWr30o6EJ5Ubpaiy/pub?start=true&loop=false&delayms=3000   7. Transforma tu Audio a Texto - Los "Oídos" de tu Asistente Explicación para principiantes: En esta lección vamos a crear la parte más mágica de nuestro asistente: convertir tu voz en texto que Python pueda entender. Es como enseñarle a tu computadora a escuchar y tomar notas de lo que dices. ¡Es el primer paso para una conversación real con tu asistente! Objetivo de esta lección: Configurar el reconocimiento de voz Capturar audio del micrófono Convertir audio en texto Manejar errores comunes Analogía: Piensa en esto como enseñarle a un amigo extranjero a entender español: Tu voz = Sonidos en español speech_recognition = Amigo que está aprendiendo Texto = Lo que tu amigo escribe después de entenderte 📦 Paso 3: Instalar la Librería de Reconocimiento de Voz ¿Qué es speech_recognition ? Es una librería...
Leer más

10. Haz que tu asistente hable

 https://docs.google.com/presentation/d/e/2PACX-1vTHAFRd6DI8h9_5SuA-ScwG28zy0CM7BxtMoks6vtUlj4v53h6xvaoB_oO7_ZducNACQ5FBXU6xzE74/pub?start=false&loop=false&delayms=3000 10. Haz que tu Asistente Hable - La "Boca" de tu Asistente Explicación para principiantes: ¡Es momento de darle voz a tu asistente! En esta lección vamos a transformar el texto en voz hablada. Imagina que hasta ahora tu asistente era como una persona sorda que solo podía leer lo que escribías. Ahora le vamos a dar la capacidad de responderte hablando, como Siri o Alexa. Objetivo de esta lección: Instalar y configurar pyttsx3 (motor de texto a voz) Hacer que el asistente diga cualquier texto Entender el flujo básico de síntesis de voz Prepararse para personalizar la voz Analogía: pyttsx3 es como un sintetizador vocal o un cantante robótico. Tú le das la letra (texto) y él la canta (habla) usando diferentes voces y estilos. 📦 Paso 1: Instalar la Librería pyttsx3 ¿Qué es pyttsx3? Es una librería Python ...
Leer más

8. NUEVO - Solución si tu micrófono no está captando tu audio

  https://docs.google.com/presentation/d/e/2PACX-1vQmcGg0EfbCv-ZVuqeEl7TLPKuaVyK6KsgHqpSRqeLTZ-mUFV8JlQ6a5pbH2WbLBGcXinzLTTBSKvPb/pub?start=false&loop=false&delayms=3000  8. NUEVO - Solución si tu Micrófono no Capta tu Audio Explicación para principiantes: Si tu asistente dice constantemente "No pude entenderlo bien" pero tú SÍ estás hablando, el problema está en la conexión entre tu voz y Python. Imagina que tu micrófono es un teléfono y Python es un amigo al otro lado de la línea. Si el teléfono está roto o mal configurado, tu amigo no te escuchará, ¡aunque tú estés gritando! Objetivo de esta lección: Diagnosticar problemas de captura de audio Configurar correctamente el micrófono en Windows Identificar programas que interfieren Probar soluciones paso a paso Estado actual del problema: python while True :      print ( 'Escuchando...' )   # ✅ Esto sí aparece     audio = listener . listen ( source )   # ⚠️ Aquí está e...
Leer más