الهدف التعليمي

تعلم كيفية معالجة مدخلات الـ Forms في JavaScript مع التحقق من الصحة وعرض النتائج بشكل تفاعلي، مع تطبيق مبادئ تصميم الواجهات الحديثة.

أدخل بياناتك

الشرح البرمجي
// معالجة إرسال النموذج
                    document.getElementById("userForm").addEventListener("submit", function(event) {
                        event.preventDefault();
                        
                        const name = document.getElementById("name").value.trim();
                        const age = document.getElementById("age").value.trim();
                        const hobby = document.getElementById("hobby").value.trim();
                        
                        if (!name || !age || !hobby) {
                            showError("من فضلك املأ جميع الحقول!");
                            return;
                        }
                        
                        const message = `أهلاً يا ${name}! عمرك ${age} سنة، وهوايتك المفضلة هي ${hobby}.`;
                        showOutput(message);
                    });
                    
                    function showOutput(message) {
                        const output = document.getElementById("output");
                        output.querySelector("#outputContent").textContent = message;
                        output.classList.add("show");
                    }