Django macht zwei <select> statt einer, versuchen, Bootstrap (Formular-Upload)

Question

So versuche ich, eine Website mit Django zu machen und ich renne in ein Problem, wo, wenn ich eine Auswahlliste erstellen zwei auftaucht.

Html:

<form action="/upload/" method="post" enctype="multipart/form-data"> 
{% csrf_token %} 
<div class="form-group"> 

    <select class="form-control"> 
     {% for course in form.courseChoices %} 
     <option value="{{course}}">{{course}}</option> 
     {% endfor %} 
    </select> 
    <!--div class="col-lg-6 col-sm-6 col-12" id="upload_form" --> 
     <label class="btn btn-block btn-primary"> 
      {{ form.document }} <input type="file" style="display: none; width: 100%;" > 
     </label> 
    </div> </form> 

Dies ist, was ist aussieht here

Meine Form nur eine einfache Modelform mit ein paar Feldern ist. forms.py class FileForm(forms.ModelForm): class Meta: model = FileUploads fields = ('semesterChoices', 'document', 'courseChoices',)

Hier ist, was mein Modell

class FileUploads(models.Model): 
semestersList = ['Spring 2017', 
       'Fall 2016', 
       'Spring 2016', 
       'Fall 2015', 
       'Spring 2015', 
       'Fall 2014', 
       'Spring 2014', 
       'Fall 2013'] 
with open('polls/courses.txt', 'r') as f: 
    coursesList = [line.strip() for line in f] 

semesters = [(option, option) for option in semestersList] 
courses = [(course, course) for course in coursesList] 
semesterChoices = models.CharField(max_length=20, choices=semesters, default="Spring 2017") 
courseChoices = models.CharField(max_length=20, choices=courses, default="ACCT Accounting") 
document = models.FileField(upload_to='documents/') 
uploaded_at = models.DateTimeField(auto_now_add=True) 

Ich möchte nur die Bootstrap-select wie

aussieht, aber es scheint, dass alles, was Wert übergeben wird, in es nicht wirklich wichtig ist, ist es die Takes zweite Select-Anweisung als Eingabe.

Answer 1

Sie müssen sowohl Ihre Formularklasse als auch Ihre Vorlage anpassen.

Vor allem, wenn Sie möchten, dass Ihr Formular eine Auswahleingabe für Ihre courseChoices hat, müssen Sie dies explizit in Ihrem Formular definieren. Ihr Modell enthält nur eine CharField dafür und standardmäßig wird Ihr Formular auch nur eine CharField bereitstellen.

from django import forms 

from .models import courses as course_choices 


FileForm(forms.ModelForm): 
    courseChoices = forms.ChoiceField(choices=course_choices) 

    class Meta: 
     model = FileUploads 
     fields = ('semesterChoices', 'document', 'courseChoices',) 

Beachten Sie, dass das Formular nun drei Felder mit einem von ihnen hat wird eine ChoiceField anstelle eines CharField und die andere mit dem Standard-Formularfeld für die entsprechenden Modellfeld zu verwenden, außer Kraft gesetzt! Wenn Sie eine weitere ChoiceField für Ihre Semesterwahl haben möchten, müssen Sie das gleiche mit diesem Feld tun.

Dann in Ihrer Vorlage müssen Sie manuell Ihr <select> Feld wie folgt machen:

{# stuff before your form #} 

<form action="/upload/" method="post" enctype="multipart/form-data"> 
    {% csrf_token %} 
    <div class="form-group"> 
     {{ form.non_field_errors }}    

     {{ form.courseChoices.errors }} 
     <select name="{{ form.courseChoices.name }}" id="{{ form.courseChoices.id_for_label }}" class="form-control"> 
      {% for value, name in form.courseChoices.field.choices %} 
       <option value="{{ value }}">{{ name }}</option> 
      {% endfor %} 
     </select> 

     {{ form.document.errors }} 
     <label class="btn btn-default btn-file"> 
      <input type="file" style="display: none;" name={{ form.document.name }} id={{ form.document.id_for_label }}> 
     </label> 
    </div> 
</form> 

{# stuff after your form #} 

auch die Dokumentation über manually rendering form fields sehen.

Ich weiß nicht, ob die Dateieingabe mit Bootstrap wie folgt funktioniert.

Sie können das vollständige Formular auch immer rendern, indem Sie einfach {{form.as_p}} zu Ihrer Vorlage hinzufügen, um zu sehen, wie Ihr Formular unsteril aussehen sollte.

In Ihrem Modell haben Sie Ihr Feld courseChoices benannt, was ein wenig verwirrend ist, weil Sie tatsächlich nur einen Kurs nach dem anderen speichern, was eine der Möglichkeiten ist, die Sie ihm gegeben haben. Daher macht es keinen Sinn, es courseChoices zu nennen. Stattdessen sollten Sie Ihr Tupel von Optionen course_choices und Ihr Modellfeld nur natürlich aufrufen.

Eine kleine Randnotiz: In Python Menschen bevorzugen in der Regel Schlange Fall zugunsten Kamel Fall. Wenn Sie also Ihren Codierungsstil anpassen möchten, verwenden Sie course_choices anstelle von courseChoices.