اضافة قائمة منسدلة html وحصول علي البيانات منها من خلال django

Omar Mhmd · 20 مايو

السلام عليكم

اريد اضافة قائمة منسدلة بمعنى حقل به قيم يجب ان يختار منها المستخدم ولا يستطيع كتابة اي قيم اخري فى html

ثانيا اريد الحصول غلي القيمة التى اختارها المستخدم من القائمة المنسدلة باستخدام الجانغو وتخزنها في قاعدة بيانات

شكرا لكم

عبد الوهاب بومعراف · 20 مايو

بداية، ستحتاج إلى إنشاء نموذج Django يعبر عن البيانات التي تريد تخزينها لنفترض أنك تريد حفظ اختيار المستخدم في حقل يسمى 'choice' فأول خطوة كما ذكرنا هي إنشاء النموذج على النحو التالي في ملف `models.py`:

from django.db import models

class ChoiceModel(models.Model):
    CHOICES = [
        ('option1', 'Option 1'),
        ('option2', 'Option 2'),
        ('option3', 'Option 3'),
    ]
    choice = models.CharField(max_length=10, choices=CHOICES)

    def __str__(self):
        return self.choice

وهذا النموذج يحتوي على حقل يتضمن خيارات ثابتة يمكن للمستخدم الاختيار منها.

ثاني شيء ستحتاج إلى إنشاء نموذج Form يعرض القائمة المنسدلة في HTML ننشؤه من خلال ملف forms.py على النحو التالي:

from django import forms
from .models import ChoiceModel

class ChoiceForm(forms.ModelForm):
    class Meta:
        model = ChoiceModel
        fields = ['choice']

ولتوضيح الفكرة فهذا النموذج يستخدم النموذج الذي أنشأته في الخطوة السابقة لعرض القائمة المنسدلة في HTML.

بعدها ستحتاج إلى إنشاء عرض أو (View) يعرض النموذج ويتعامل مع البيانات المرسلة من المستخدم ننشؤه في ملف views.py على النحو التالي:

from django.shortcuts import render, redirect
from .forms import ChoiceForm

def choice_view(request):
    if request.method == 'POST':
        form = ChoiceForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('success') 
    else:
        form = ChoiceForm()
    return render(request, 'choice_form.html', {'form': form})

هذا العرض يتأكد من أن النموذج يتم عرضه بشكل صحيح ويتعامل مع إرسال البيانات فإذا كان الطلب من نوع POST يتم التحقق من صحة النموذج وحفظ البيانات في قاعدة البيانات لكن سنحتاج إلى إنشاء قالب HTML يعرض النموذج. يمكنك إنشاء هذا القالب في ملف choice_form.html داخل مجلد `templates` على النحو التالي:

<!-- templates/choice_form.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Choice Form</title>
</head>
<body>
    <h1>اختر من القائمة المنسدلة</h1>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">إرسال</button>
    </form>
</body>
</html>