Form Events

// Method 1: Form submission
const form = document.getElementById('myForm');

form.addEventListener('submit', function(e) {
    e.preventDefault(); // Prevent default submission
    console.log('Form submitted');
    
    const formData = new FormData(form);
    console.log('Form data:', Object.fromEntries(formData));
});

// Method 2: Input events
const input = document.getElementById('myInput');

input.addEventListener('input', function(e) {
    console.log('Input value:', e.target.value);
});

input.addEventListener('change', function(e) {
    console.log('Value changed:', e.target.value);
});

input.addEventListener('focus', function(e) {
    console.log('Input focused');
    e.target.style.borderColor = 'blue';
});

input.addEventListener('blur', function(e) {
    console.log('Input blurred');
    e.target.style.borderColor = '';
    // Validate on blur
    validateInput(e.target);
});

// Method 3: Real-time validation
input.addEventListener('input', function(e) {
    const value = e.target.value;
    if (value.length < 3) {
        e.target.setCustomValidity('Must be at least 3 characters');
    } else {
        e.target.setCustomValidity('');
    }
});

// Method 4: Select element
const select = document.getElementById('mySelect');

select.addEventListener('change', function(e) {
    console.log('Selected:', e.target.value);
});

// Method 5: Checkbox
const checkbox = document.getElementById('myCheckbox');

checkbox.addEventListener('change', function(e) {
    console.log('Checked:', e.target.checked);
});

// Method 6: Radio buttons
const radios = document.querySelectorAll('input[type="radio"]');

radios.forEach(radio => {
    radio.addEventListener('change', function(e) {
        if (e.target.checked) {
            console.log('Selected:', e.target.value);
        }
    });
});

// Method 7: Textarea
const textarea = document.getElementById('myTextarea');

textarea.addEventListener('input', function(e) {
    const length = e.target.value.length;
    console.log('Character count:', length);
    
    if (length > 100) {
        e.target.style.color = 'red';
    } else {
        e.target.style.color = '';
    }
});

// Method 8: Form validation
form.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const email = form.querySelector('#email').value;
    const password = form.querySelector('#password').value;
    
    if (!email.includes('@')) {
        alert('Invalid email');
        return;
    }
    
    if (password.length < 8) {
        alert('Password must be at least 8 characters');
        return;
    }
    
    console.log('Form is valid');
    // Submit form
});

// Method 9: Reset event
form.addEventListener('reset', function(e) {
    console.log('Form reset');
});

// Method 10: Invalid event
input.addEventListener('invalid', function(e) {
    e.preventDefault();
    console.log('Invalid input');
    showError(e.target, 'Please enter a valid value');
});