Form Events in JavaScript

1// Method 1: Form submission
2const form = document.getElementById('myForm');
3
4form.addEventListener('submit', function(e) {
5    e.preventDefault(); // Prevent default submission
6    console.log('Form submitted');
7    
8    const formData = new FormData(form);
9    console.log('Form data:', Object.fromEntries(formData));
10});
11
12// Method 2: Input events
13const input = document.getElementById('myInput');
14
15input.addEventListener('input', function(e) {
16    console.log('Input value:', e.target.value);
17});
18
19input.addEventListener('change', function(e) {
20    console.log('Value changed:', e.target.value);
21});
22
23input.addEventListener('focus', function(e) {
24    console.log('Input focused');
25    e.target.style.borderColor = 'blue';
26});
27
28input.addEventListener('blur', function(e) {
29    console.log('Input blurred');
30    e.target.style.borderColor = '';
31    // Validate on blur
32    validateInput(e.target);
33});
34
35// Method 3: Real-time validation
36input.addEventListener('input', function(e) {
37    const value = e.target.value;
38    if (value.length < 3) {
39        e.target.setCustomValidity('Must be at least 3 characters');
40    } else {
41        e.target.setCustomValidity('');
42    }
43});
44
45// Method 4: Select element
46const select = document.getElementById('mySelect');
47
48select.addEventListener('change', function(e) {
49    console.log('Selected:', e.target.value);
50});
51
52// Method 5: Checkbox
53const checkbox = document.getElementById('myCheckbox');
54
55checkbox.addEventListener('change', function(e) {
56    console.log('Checked:', e.target.checked);
57});
58
59// Method 6: Radio buttons
60const radios = document.querySelectorAll('input[type="radio"]');
61
62radios.forEach(radio => {
63    radio.addEventListener('change', function(e) {
64        if (e.target.checked) {
65            console.log('Selected:', e.target.value);
66        }
67    });
68});
69
70// Method 7: Textarea
71const textarea = document.getElementById('myTextarea');
72
73textarea.addEventListener('input', function(e) {
74    const length = e.target.value.length;
75    console.log('Character count:', length);
76    
77    if (length > 100) {
78        e.target.style.color = 'red';
79    } else {
80        e.target.style.color = '';
81    }
82});
83
84// Method 8: Form validation
85form.addEventListener('submit', function(e) {
86    e.preventDefault();
87    
88    const email = form.querySelector('#email').value;
89    const password = form.querySelector('#password').value;
90    
91    if (!email.includes('@')) {
92        alert('Invalid email');
93        return;
94    }
95    
96    if (password.length < 8) {
97        alert('Password must be at least 8 characters');
98        return;
99    }
100    
101    console.log('Form is valid');
102    // Submit form
103});
104
105// Method 9: Reset event
106form.addEventListener('reset', function(e) {
107    console.log('Form reset');
108});
109
110// Method 10: Invalid event
111input.addEventListener('invalid', function(e) {
112    e.preventDefault();
113    console.log('Invalid input');
114    showError(e.target, 'Please enter a valid value');
115});