إضافة أعضاء جدد باستخدام JavaScript وAJAX

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

النموذج HTML

نبدأ بالنموذج الذي يحتوي على حقول لإضافة بيانات العضو:

```html
<form id="add_member" action="/api/add_member" method="POST">
<input type="text" name="memberName" placeholder="اسم العضو" required>
<input type="text" name="phone" placeholder="رقم الهاتف" required>
<input type="text" name="avatar" placeholder="رابط الصورة">
<textarea name="description" placeholder="وصف العضو"></textarea>

<ul id="services">
<li>
<input type="text" name="services[]" placeholder="نوع الخدمة">
<span class="remove"> - </span>
</li>
</ul>

<button type="submit">إضافة عضو</button>
<p class="error"></p>
<p class="message"></p>
</form>
<button id="add-service">إضافة خدمة</button>
```

#### JavaScript و AJAX

نستخدم JavaScript للتفاعل مع النموذج وإرسال البيانات باستخدام AJAX لإضافة العضو إلى قاعدة البيانات.

```javascript
var _form = document.getElementById('add_member');

_form.addEventListener('submit', function (e) {
e.preventDefault();

var xhr = new XMLHttpRequest();
var url = _form.getAttribute('action');

xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');

var form_data = {
memberName: _form.querySelector('input[name="memberName"]').value,
phone: _form.querySelector('input[name="phone"]').value,
avatar: _form.querySelector('input[name="avatar"]').value,
description: _form.querySelector('textarea[name="description"]').value,
services: []
};

var services = [];
_form.querySelectorAll('input[name="services[]"]').forEach(input => {
if (input.value.trim().length > 0) {
services.push(input.value.trim());
}
});

form_data.services = services;

xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var jsonResponse = JSON.parse(xhr.responseText);
handleSuccess(jsonResponse);
} else {
handleError(xhr);

xhr.send(JSON.stringify(form_data));
});

function handleSuccess(response) {
var messageElement = _form.querySelector('.message');
var errorElement = _form.querySelector('.error');

if (response.error) {
errorElement.innerText = response.error;
messageElement.innerText = '';
} else if (response.success && response.message) {
errorElement.innerText = '';
messageElement.innerText = response.message;
_form.reset();
clearServices();
scrollToMessage();

function handleError(xhr) {
var errorElement = _form.querySelector('.error');
errorElement.innerText = 'حدث خطأ أثناء الاتصال بالخادم، يرجى التأكد من تشغيل الخادم.';

function clearServices() {
var servicesInputs = _form.querySelectorAll('input[name="services[]"]');
servicesInputs.forEach(input => input.parentElement.remove());

function scrollToMessage() {
var messageElement = _form.querySelector('.message');
window.scrollTo({
top: messageElement.offsetTop,
behavior: 'smooth'

var _addService = document.getElementById('add-service');

_addService.addEventListener('click', function() {
var _services = document.getElementById('services'),
_li = document.createElement('li'),
_input = document.createElement('input'),
_span = document.createElement('span');

_input.setAttribute('type', 'text');
_input.setAttribute('placeholder', 'نوع الخدمة');
_input.setAttribute('name', 'services[]');

_span.classList.add('remove');
_span.innerText = ' - ';

_li.append(_input);
_li.append(_span);

_services.append(_li);

_li.querySelector('.remove').onclick = function () {
removeService(this);
;

_input.addEventListener('focus', function () {
inputType(this, 'focus');
);

_input.addEventListener('blur', function () {
inputType(this, 'blur');
);
);

function removeService(element, removeDirectly = false) {
if (removeDirectly) {
element.parentElement.remove();
else {
element.parentElement.querySelector('input').style.backgroundColor = 'red';

setTimeout(function () {
var confirmRemovingElement = confirm('هل أنت متأكد من حذف هذا الخدمة؟');
if (confirmRemovingElement) {
element.parentElement.remove();
else {
element.parentElement.querySelector('input').style.backgroundColor = 'initial';

, 500, element);

function inputType(_input, event) {
if (event === 'focus') {
var placeholder = _input.getAttribute('placeholder');
_input.setAttribute('data-placeholder', placeholder);
_input.setAttribute('placeholder', '');
else if (event === 'blur') {
var dataPlaceholder = _input.getAttribute('data-placeholder');
_input.setAttribute('placeholder', dataPlaceholder);
_input.setAttribute('data-placeholder', '');
```

الخلاصة

باستخدام هذا الكود، يمكنك الآن إضافة أعضاء جدد وخدماتهم إلى قاعدة البيانات بشكل ديناميكي وسهل. يتيح هذا النهج للمستخدمين إضافة بياناتهم بسهولة وبدون إعادة تحميل الصفحة.