script.js

/**
 * Multi-Step Form Wizard - Main JavaScript
 * Handles form navigation, validation, and submission
 * 
 * @author      Molla Samser
 * @email       help@rskworld.in
 * @website     https://rskworld.in
 * @contact     +91 9330539277
 * 
 * For website or application development, contact us today!
 */

document.addEventListener('DOMContentLoaded', function() {
    // DOM Elements
    const form = document.getElementById('multiStepForm');
    const steps = document.querySelectorAll('.step');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const submitBtn = document.getElementById('submitBtn');
    const progressBar = document.querySelector('.progress-bar');
    let currentStep = 0;
    const totalSteps = steps.length - 1; // Excluding the thank you step

    // Initialize the form
    function initForm() {
        showStep(currentStep);
        updateButtons();
    }

    // Show current step and hide others
    function showStep(stepIndex) {
        // Hide all steps
        steps.forEach((step, index) => {
            step.classList.remove('active', 'slide-in-left', 'slide-in-right');
            if (index === stepIndex) {
                step.classList.add('active');
            }
        });

        // Update progress bar
        const progress = (stepIndex / totalSteps) * 100;
        progressBar.style.width = `${progress}%`;
        progressBar.setAttribute('aria-valuenow', progress);

        // Update form title if needed
        document.title = `Step ${stepIndex + 1} of ${totalSteps} - Multi-Step Form`;
    }

    // Update navigation buttons state
    function updateButtons() {
        // Previous button
        if (currentStep === 0) {
            prevBtn.disabled = true;
        } else {
            prevBtn.disabled = false;
        }

        // Next/Submit button
        if (currentStep === totalSteps - 1) {
            nextBtn.style.display = 'none';
            submitBtn.style.display = 'block';
        } else if (currentStep === totalSteps) {
            // On the thank you page
            prevBtn.style.display = 'none';
            nextBtn.style.display = 'none';
            submitBtn.style.display = 'none';
        } else {
            nextBtn.style.display = 'block';
            submitBtn.style.display = 'none';
        }
    }

    // Validate current step
    function validateStep(stepIndex) {
        const currentStepFields = steps[stepIndex].querySelectorAll('[required]');
        let isValid = true;

        currentStepFields.forEach(field => {
            if (!field.checkValidity()) {
                field.classList.add('is-invalid');
                isValid = false;
            } else {
                field.classList.remove('is-invalid');
                field.classList.add('is-valid');
            }
        });

        return isValid;
    }

    // Go to next step
    function nextStep() {
        if (validateStep(currentStep)) {
            // Add slide-out animation
            steps[currentStep].classList.add('slide-out-left');
            
            // Move to next step after animation
            setTimeout(() => {
                currentStep++;
                showStep(currentStep);
                steps[currentStep].classList.add('slide-in-right');
                updateButtons();
                
                // Scroll to top of form
                form.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }, 300);
        }
    }

    // Go to previous step
    function prevStep() {
        // Add slide-out animation
        steps[currentStep].classList.add('slide-out-right');
        
        // Move to previous step after animation
        setTimeout(() => {
            currentStep--;
            showStep(currentStep);
            steps[currentStep].classList.add('slide-in-left');
            updateButtons();
            
            // Scroll to top of form
            form.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }, 300);
    }

    // Handle form submission
    function handleSubmit(e) {
        e.preventDefault();
        
        if (validateStep(currentStep)) {
            // Show loading state
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Submitting...';
            
            // Simulate form submission
            setTimeout(() => {
                // In a real app, you would submit the form data to a server here
                const formData = new FormData(form);
                const formValues = {};
                
                // Convert FormData to object
                formData.forEach((value, key) => {
                    formValues[key] = value;
                });
                
                // Move to thank you step
                currentStep++;
                showStep(currentStep);
                updateButtons();
                
                // Display submitted data
                displaySubmittedData(formValues);
                
                // Reset form and buttons
                form.reset();
                submitBtn.disabled = false;
                submitBtn.innerHTML = 'Submit';
                
                // Scroll to top of form
                form.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }, 1500);
        }
    }
    
    // Display submitted data on the thank you page
    function displaySubmittedData(data) {
        const formDataContainer = document.getElementById('formData');
        formDataContainer.innerHTML = '<h5>Your Information:</h5>';
        
        // Map field IDs to display names
        const fieldLabels = {
            'fullName': 'Full Name',
            'email': 'Email',
            'phone': 'Phone',
            'address': 'Address',
            'city': 'City',
            'zip': 'ZIP Code',
            'referral': 'How you heard about us',
            'comments': 'Comments'
        };
        
        // Create and append data paragraphs
        for (const [key, value] of Object.entries(data)) {
            if (value && fieldLabels[key]) {
                const p = document.createElement('p');
                p.innerHTML = `<strong>${fieldLabels[key]}:</strong> ${value}`;
                formDataContainer.appendChild(p);
            }
        }
        
        // Add timestamp
        const timestamp = new Date().toLocaleString();
        const p = document.createElement('p');
        p.innerHTML = `<strong>Submitted on:</strong> ${timestamp}`;
        p.classList.add('text-muted', 'small');
        formDataContainer.appendChild(p);
    }
    
    // Event Listeners
    nextBtn.addEventListener('click', nextStep);
    prevBtn.addEventListener('click', prevStep);
    form.addEventListener('submit', handleSubmit);
    
    // Keyboard navigation
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && currentStep < totalSteps - 1) {
            e.preventDefault();
            nextStep();
        } else if (e.key === 'ArrowLeft' && currentStep > 0) {
            e.preventDefault();
            prevStep();
        } else if (e.key === 'ArrowRight' && currentStep < totalSteps - 1) {
            e.preventDefault();
            nextStep();
        }
    });
    
    // Real-time validation for fields
    form.querySelectorAll('input, select, textarea').forEach(field => {
        field.addEventListener('input', function() {
            if (field.checkValidity()) {
                field.classList.remove('is-invalid');
                field.classList.add('is-valid');
            } else {
                field.classList.remove('is-valid');
            }
        });
    });
    
    // Initialize the form
    initForm();
    
    // Add animation classes
    document.querySelectorAll('.step').forEach(step => {
        step.style.animation = 'fadeIn 0.5s ease-in-out';
    });
});