99- دروس جافا سكربت – DOM – JS DOM Forms

### التعامل مع النماذج في DOM باستخدام JavaScript

يُعتبر DOM (Document Object Model) الجسر الذي يربط بين صفحات الويب وهياكلها البرمجية، حيث يُتيح للمطورين التفاعل مع عناصر HTML بصورة ديناميكية. من بين هذه العناصر، تُعتبر النماذج (Forms) من العناصر الأساسية التي تُستخدم لجمع بيانات المستخدم. يُتيح لنا JavaScript القدرة على التفاعل مع هذه النماذج بطرق متقدمة، بدءًا من التحقق من صحة البيانات المدخلة إلى إرسال البيانات إلى الخادم.

#### الوصول إلى عناصر النموذج

للبدء بالتفاعل مع نموذج باستخدام JavaScript، نحتاج أولاً للوصول إلى هذه العناصر. يمكن الوصول إلى عناصر النموذج باستخدام عدة طرق، منها:

1. **باستخدام `document.forms`**:

var form = document.forms['myForm'];
   var input = form['username'];
   

2. **باستخدام `getElementById`**:

var input = document.getElementById('username');
   

#### التحقق من صحة البيانات

التحقق من صحة البيانات المدخلة من قبل المستخدم هو جزء حيوي من التعامل مع النماذج. يُمكن القيام بذلك باستخدام JavaScript لضمان أن البيانات تتوافق مع المتطلبات المحددة قبل إرسالها.

مثال على التحقق من صحة البريد الإلكتروني:
“`html

Submit

document.getElementById(‘myForm’).addEventListener(‘submit’, function(event) {
var emailInput = document.getElementById(’email’);
var emailValue = emailInput.value;
var emailPattern = /^[^s@]+@[^s@]+.[^s@]+$/;

if (!emailPattern.test(emailValue)) {
alert(‘Please enter a valid email address.’);
event.preventDefault();
}
});

“`

#### التعامل مع أحداث النموذج

يمكن استخدام JavaScript للتفاعل مع الأحداث المختلفة للنموذج، مثل `submit`، `focus`، و`blur`.

مثال على تغيير لون حقل الإدخال عند التركيز عليه:
“`html

var usernameInput = document.getElementById(‘username’);

usernameInput.addEventListener(‘focus’, function() {
usernameInput.style.backgroundColor = ‘#e0f7fa’;
});

usernameInput.addEventListener(‘blur’, function() {
usernameInput.style.backgroundColor = ”;
});

“`

#### إرسال النموذج باستخدام AJAX

باستخدام AJAX، يمكنك إرسال البيانات إلى الخادم دون الحاجة إلى إعادة تحميل الصفحة. هذا يُحسن من تجربة المستخدم ويجعل التطبيق أكثر استجابة.

مثال على إرسال البيانات باستخدام `fetch` API:
“`html

Submit

document.getElementById(‘myForm’).addEventListener(‘submit’, function(event) {
event.preventDefault();

var username = document.getElementById(‘username’).value;

fetch(‘https://example.com/submit’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify({ username: username })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(‘Error:’, error));
});

“`

### الخلاصة

يُعتبر التفاعل مع النماذج في JavaScript [شركة برمجة مصرية] جزءًا حيويًا من تطوير واجهات المستخدم على الويب. من خلال DOM، يمكنك [شركة برمجة مصرية] الوصول إلى عناصر النموذج، التحقق من صحة البيانات، التعامل مع الأحداث، وإرسال البيانات إلى الخادم بفعالية. باستخدام الأدوات والتقنيات المناسبة، يمكنك تحسين تجربة المستخدم وجعل التطبيقات أكثر ديناميكية وتفاعلية.