Skip to main content

​
Overview

The form generation API provides functions to dynamically create and manage vehicle inspection forms based on the number of vehicles specified by the user.

​
enviar()

Main entry point for generating vehicle forms. Validates client data and creates dynamic vehicle forms. Source: script.js:8-39

​
Parameters

This function takes no parameters. It reads values directly from the DOM.

​
Returns

void - Does not return a value

​
Side Effects

  • Validates client information fields (nombre, apellidos, razonSocial, nAutos)
  • Clears previous forms from the DOM
  • Resets the vehiculosData global array
  • Generates new vehicle forms
  • Adds a calculate button
  • Shows loading animation

​
Validation Rules

All client fields (nombre, apellidos, razonSocial, nAutos) are required. The number of vehicles must be between 1 and 50.

​
Example Implementation

function enviar() {
    // Validar campos obligatorios
    const nombre = document.getElementById("nombre").value.trim();
    const apellidos = document.getElementById("apellidos").value.trim();
    const razonSocial = document.getElementById("razonSocial").value.trim();
    const nAutosInput = document.getElementById("nAutos").value.trim();

    // Validaciones básicas
    if (!nombre || !apellidos || !razonSocial || !nAutosInput) {
        mostrarError("Por favor, complete todos los campos obligatorios.");
        return;
    }

    numeroAutos = parseInt(nAutosInput);
    if (isNaN(numeroAutos) || numeroAutos <= 0 || numeroAutos > 50) {
        mostrarError("Por favor, ingrese un número válido de vehículos (1-50).");
        return;
    }

    // Limpiar formularios previos
    document.getElementById("formularios").innerHTML = "";
    vehiculosData = [];

    // Generar formularios para cada vehículo
    generarFormulariosVehiculos();

    // Agregar botón de calcular
    agregarBotonCalcular();

    // Mostrar animación de carga
    mostrarAnimacionCarga();
}

​
Usage

<button onclick="enviar()">Generar Formularios</button>

​
generarFormulariosVehiculos()

Generates individual forms for each vehicle based on the global numeroAutos variable. Source: script.js:44-51

​
Parameters

This function takes no parameters. It uses the global numeroAutos variable.

​
Returns

void - Does not return a value

​
Side Effects

  • Appends vehicle form HTML to the #formularios container
  • Creates one form per vehicle (loop from 1 to numeroAutos)

​
Example Implementation

function generarFormulariosVehiculos() {
    const contenedor = document.getElementById("formularios");

    for (let i = 1; i <= numeroAutos; i++) {
        const vehiculoHTML = crearFormularioVehiculo(i);
        contenedor.innerHTML += vehiculoHTML;
    }
}

​
crearFormularioVehiculo()

Creates the HTML structure for a single vehicle inspection form. Source: script.js:58-102

​
Parameters

​
numeroVehiculo
number
required
The vehicle number (1-indexed) used to generate unique IDs and labels

​
Returns

string - HTML string containing the complete vehicle form structure

​
Form Structure

Each vehicle form includes:
  • Motorization options: Diesel, Gasolina, Híbrido, Eléctrico (radio buttons)
  • ITV Status: Aprobado, No Aprobado (radio buttons)
  • Observations: Textarea with 250 character limit
All radio button groups use unique names based on the vehicle number (e.g., motorizacion1, motorizacion2) to ensure proper form behavior.

​
Example Implementation

function crearFormularioVehiculo(numeroVehiculo) {
    return `
        <div class="bloque" data-vehiculo="${numeroVehiculo}">
            <h3>🚙 Vehículo Nº ${numeroVehiculo}</h3>

            <p>🔧 Motorización:</p>
            <label>
                <input type="radio" id="radio1${numeroVehiculo}" 
                       name="motorizacion${numeroVehiculo}" 
                       value="Diesel" required>
                🛢️ Diesel
            </label>
            <label>
                <input type="radio" id="radio2${numeroVehiculo}" 
                       name="motorizacion${numeroVehiculo}" 
                       value="Gasolina">
                ⛽ Gasolina
            </label>
            <label>
                <input type="radio" id="radio3${numeroVehiculo}" 
                       name="motorizacion${numeroVehiculo}" 
                       value="Hibrido">
                🔋 Híbrido
            </label>
            <label>
                <input type="radio" id="radio4${numeroVehiculo}" 
                       name="motorizacion${numeroVehiculo}" 
                       value="Electrico">
                ⚡ Eléctrico
            </label>
            
            <div class="aprobados">
                <p>📋 Estado de la ITV:</p>
                <label>
                    <input type="radio" id="radio5${numeroVehiculo}" 
                           value="Aprobo" 
                           name="aprobados${numeroVehiculo}">
                    ✅ Aprobado
                </label>
                <label>
                    <input type="radio" id="radio6${numeroVehiculo}" 
                           value="NoAprobo" 
                           name="aprobados${numeroVehiculo}">
                    ❌ No Aprobado
                </label>
            </div>
            
            <label for="observaciones${numeroVehiculo}">📝 Observaciones del vehículo:</label>
            <textarea
                id="observaciones${numeroVehiculo}"
                name="observaciones${numeroVehiculo}"
                class="caja-texto"
                placeholder="Ingrese observaciones sobre el estado del vehículo..."
                maxlength="250"
                rows="4">
            </textarea>
        </div>
    `;
}

​
Usage

const form1 = crearFormularioVehiculo(1);
const form2 = crearFormularioVehiculo(2);

​
agregarBotonCalcular()

Appends the calculate button to the forms container after all vehicle forms have been generated. Source: script.js:107-114

​
Parameters

This function takes no parameters.

​
Returns

void - Does not return a value

​
Side Effects

  • Appends a button element to the #formularios container
  • Button spans full grid width and is centered

​
Example Implementation

function agregarBotonCalcular() {
    const contenedor = document.getElementById("formularios");
    contenedor.innerHTML += `
        <button onclick="calcularYMostrar();" 
                id="calcular" 
                class="btn-primary" 
                style="grid-column: 1 / -1; justify-self: center;">
            Calcular Resultados
        </button>
    `;
}
The button calls calcularYMostrar() which validates, calculates, and displays results.

​
mostrarAnimacionCarga()

Displays a loading animation on the submit button while forms are being generated. Source: script.js:469-482

​
Parameters

This function takes no parameters.

​
Returns

void - Does not return a value

​
Side Effects

  • Adds loading class to the submit button
  • Changes button text to ”⏳ Generando formularios…”
  • Disables the button for 1 second
  • Restores original state after timeout

​
Example Implementation

function mostrarAnimacionCarga() {
    const btnEnviar = document.getElementById("enviar");
    const textoOriginal = btnEnviar.innerHTML;

    btnEnviar.classList.add("loading");
    btnEnviar.innerHTML = "⏳ Generando formularios...";
    btnEnviar.disabled = true;

    setTimeout(() => {
        btnEnviar.classList.remove("loading");
        btnEnviar.innerHTML = textoOriginal;
        btnEnviar.disabled = false;
    }, 1000);
}

​
Global Variables

​
numeroAutos

Type: number
Source: script.js:2 Stores the total number of vehicles to process. Set by the enviar() function.

​
vehiculosData

Type: Array<Object>
Source: script.js:3 Stores processed vehicle data. Each object contains:
  • numero (number): Vehicle number
  • motorizacion (string): Type of engine
  • estadoITV (string): ITV status
  • observaciones (string): Vehicle observations

Build docs developers (and LLMs) love

Get started for freeTalk to us