تعلم كيفية معالجة مدخلات الـ 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");
}