when i click on th button submit nothing change ? "<body>
    <div class="container">
        <h2>Available Images</h2>

        <form action="/process_images" method="post" enctype="multipart/form-data" id="imageForm">
            <div class="result-container">
                    {% for image_name, image_data in images.items() %}
                            <div class="image-container">
                                <input type="checkbox" name="selected_images" id="image-{{ image_name }}" value="{{ image_name }}" onchange="toggleDataInput(this);">
                                
                                <!-- Updated hidden field's name to have a consistent name -->
                                <input type="hidden" name="image_data" id="data-{{ image_name }}" value="{{ image_data }}" disabled>
                                
                                <label for="image-{{ image_name }}">
                                    <img src="data:image/jpeg;base64,{{ image_data }}" alt="Thumbnail of {{ image_name }}">
                                </label>
                            </div>
                    {% endfor %}
                    </div>
                    <div class="select-all-container">
                        <button type="button" class="select-all-button" onclick="selectAll()">Select All</button>
                <button type="submit" id="myForm" class="process-button">Process Selected Images</button>
            </div>
        </form>
        
        <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            var submitButton = document.getElementById('myForm');
            submitButton.disabled = true; // Disable the button
            submitButton.classList.add('loading'); // Add loading class
            submitButton.innerHTML = 'Processing...'; // Change button text

            // Simulate processing delay (remove setTimeout in actual implementation)
            setTimeout(function() {
                // Once processing is complete, enable the button again
                submitButton.disabled = false;
                submitButton.classList.remove('loading'); // Remove loading class
                submitButton.innerHTML = 'Process Selected Images'; // Restore original button text
            }, 3000); // Change 3000 to actual processing time
        });

 function selectAll() {
                var selectAllButton = document.querySelector('.select-all-button');
                var checkboxes = document.querySelectorAll('input[name="selected_images"]');
                var allChecked = Array.from(checkboxes).every(c => c.checked);
                checkboxes.forEach(function(checkbox) {
                    checkbox.checked = !allChecked;
                    toggleDataInput(checkbox);
                });
                if (allChecked) {
                    selectAllButton.textContent = 'Select All';
                } else {
                    selectAllButton.textContent = 'Deselect All';
                }
            }
        
function toggleDataInput(checkbox) {
                var dataInput = document.getElementById('data-' + checkbox.value);
                if (checkbox.checked) {
                    dataInput.disabled = false; // Enable the hidden input so its value gets sent on form submission
                } else {
                    dataInput.disabled = true; // Disable the hidden input so its value doesn’t get sent
                }
            }
        </script>
        

</body>