Threshawk/tinycheck-pediatric-forms

1 2// Add allergy input field3function addAllergyField(value = '') {4    const container = document.getElementById('allergyList');5    const fieldId = `allergy-${Date.now()}`;6    const div = document.createElement('div');7    div.className = 'flex items-center gap-2';8    div.innerHTML = `9        <input type="text" name="allergiesList[]" value="${value}" 10               class="flex-1 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition">11        <button type="button" onclick="this.parentElement.remove()" class="text-red-500 hover:text-red-700">12            <i data-feather="trash-2" class="w-4 h-4"></i>13        </button>14    `;15    container.appendChild(div);16    feather.replace();17}18 19// Add medication input field20function addMedicationField(value = '') {21    const container = document.getElementById('medicationList');22    const fieldId = `medication-${Date.now()}`;23    const div = document.createElement('div');24    div.className = 'flex items-center gap-2';25    div.innerHTML = `26        <input type="text" name="medicationsList[]" value="${value}" 27               class="flex-1 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary transition">28        <button type="button" onclick="this.parentElement.remove()" class="text-red-500 hover:text-red-700">29            <i data-feather="trash-2" class="w-4 h-4"></i>30        </button>31    `;32    container.appendChild(div);33    feather.replace();34}35 36document.addEventListener('DOMContentLoaded', function() {37// Show/hide allergy details based on radio selection38    const allergyRadios = document.querySelectorAll('input[name="allergies"]');39    const allergyDetailsContainer = document.getElementById('allergyDetailsContainer');40    41    allergyRadios.forEach(radio => {42        radio.addEventListener('change', function() {43            if (this.value === 'yes') {44                allergyDetailsContainer.classList.remove('hidden');45                addAllergyField();46} else {47                allergyDetailsContainer.classList.add('hidden');48                document.getElementById('allergyDetails').value = '';49            }50        });51    });52    53    // Show/hide medication details based on radio selection54    const medicationRadios = document.querySelectorAll('input[name="medication"]');55    const medicationDetailsContainer = document.getElementById('medicationDetailsContainer');56    57    medicationRadios.forEach(radio => {58        radio.addEventListener('change', function() {59            if (this.value === 'yes') {60                medicationDetailsContainer.classList.remove('hidden');61                addMedicationField();62} else {63                medicationDetailsContainer.classList.add('hidden');64                document.getElementById('medicationDetails').value = '';65            }66        });67    });68    69    // Form submission70    const form = document.getElementById('pediatricForm');71    form.addEventListener('submit', function(e) {72        e.preventDefault();73        74        // Form validation75        const requiredFields = ['firstName', 'lastName', 'dob', 'allergies', 'medication'];76let isValid = true;77        78        requiredFields.forEach(field => {79            const element = document.querySelector(`[name="${field}"]`);80            if (!element || (element.type === 'radio' && !document.querySelector(`[name="${field}"]:checked`))) {81                isValid = false;82                element?.classList.add('border-red-500');83            } else {84                element?.classList.remove('border-red-500');85            }86        });87        88        if (!isValid) {89            alert('Please fill out all required fields.');90            return;91        }92        // Collect allergy and medication lists93        const allergies = Array.from(document.querySelectorAll('input[name="allergiesList[]"]'))94            .map(input => input.value.trim())95            .filter(value => value);96        97        const medications = Array.from(document.querySelectorAll('input[name="medicationsList[]"]'))98            .map(input => input.value.trim())99            .filter(value => value);100 101        // Form data collection102        const formData = new FormData(form);103        const data = {};104        formData.forEach((value, key) => {105            data[key] = value;106        });107        108        // Add arrays to data109        data.allergiesList = allergies;110        data.medicationsList = medications;111        112        // In a real app, you would send this to your backend113        console.log('Form submitted:', data);114// Show success message115        alert('Thank you! The form has been submitted successfully.');116        form.reset();117        allergyDetailsContainer.classList.add('hidden');118        medicationDetailsContainer.classList.add('hidden');119        document.getElementById('allergyList').innerHTML = '';120        document.getElementById('medicationList').innerHTML = '';121});122        // Set max date for date inputs to today and min date for child DOB (up to 18 years ago)123        const today = new Date().toISOString().split('T')[0];124        const minChildDob = new Date();125        minChildDob.setFullYear(minChildDob.getFullYear() - 18);126        const minChildDobStr = minChildDob.toISOString().split('T')[0];127        128        document.getElementById('dob').max = today;129        document.getElementById('dob').min = minChildDobStr;130        document.getElementById('lastVisit').max = today;131        document.getElementById('lastVaccination').max = today;132        document.getElementById('parentDob').max = today;133// Calculate parent age when DOB changes134    document.getElementById('parentDob').addEventListener('change', function() {135        const dob = new Date(this.value);136        const ageDiff = Date.now() - dob.getTime();137        const ageDate = new Date(ageDiff);138        const age = Math.abs(ageDate.getUTCFullYear() - 1970);139        document.getElementById('parentAge').value = age;140    });141});