使用Django和Bootstrap Modal处理POST / GET表单

时间:2018-10-25 13:29:01

标签: python django post django-forms bootstrap-modal

我在forms Web应用程序中使用了不同的POSTGETDjango),并使用Bootstrap modal来做到这一点。

在我的模板中,用户可以选择一些文档,并以我的模式提交提交到Django表单(CustomerForm)的文档列表。通过此CustomerForm,可以发送一封电子邮件,其中包含以前填写的用户信息。

我的CustomerForm看起来像这样:

class CustomerForm(forms.ModelForm):

    def __init__(self, *args, **kwargs):
        super(CustomerForm, self).__init__(*args, **kwargs)
        self.fields['country'].empty_label = _('Select a country')
        self.fields['country'].queryset = self.fields['country'].queryset.order_by('name')
        self.fields['email'].required = True
        self.fields['first_name'].required = True
        self.fields['last_name'].required = True
        self.fields['country'].required = True
        self.fields['institution'].required = False

    class Meta:
        model = Customer
        fields = ['email', 'first_name', 'last_name', 'country', 'institution']
        widgets = {
            'email': forms.TextInput(attrs={'placeholder': _('name@example.com')}),
            'first_name': forms.TextInput(attrs={'placeholder': _('First Name')}),
            'last_name': forms.TextInput(attrs={'placeholder': _('Last Name')}),
            'institution': forms.TextInput(attrs={'placeholder': _('Agency, company, academic or other affiliation')}),
        }

我有views.py文件:

class HomeView(CreateView, FormView):
    """ Render the home page """

    template_name = 'index.html'
    form_class = CustomerForm

    def get_context_data(self, **kwargs):

        # display some things 
        # ...

        if "DocumentSelected" in self.request.GET:
            checkbox_list = self.request.GET.getlist('DocumentChoice')
            document = Document.objects.filter(id__in=checkbox_list)
            kwargs['selected_document'] = document

        return super(HomeView, self).get_context_data(**kwargs)

    def form_valid(self, form):
        email = form.cleaned_data['email']
        country = form.cleaned_data['country']

        for checkbox in self.request.GET.getlist('DocumentChoice'):
            document = Document.objects.get(id=checkbox)
            token = self.gen_token(email)

            now = timezone.now()
            expiration = now + settings.DOWNLOAD_VALIDITY
            Download.objects.create(email=email, country=country, doc_id=checkbox, token=token,
                                    expiration_date=expiration)

            self.send_email(email, document.upload, document.publication.title, token)

        return super(HomeView, self).form_valid(form)

最后在我的HTML模板中,您可以找到如下所示的内容:

<form method="GET" action="">

    <!-- Table with checkboxes - User has to check wanted objects -->

    <div class="row">
        <div class="col-md-offset-3 col-md-4">
            <input type="submit" class="btn btn-default" name="DocumentSelected" value="{% trans 'Save document(s)' %}"/>
            <input type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="{% trans 'Send document(s)' %}"/>
        </div>
    </div>
</form> 

<!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">{% trans 'Your informations' %}</h4>
        </div>
        <form method="post" action="" novalidate>
          {% csrf_token %}
          <div class="modal-body">
            <div class="row">
              <div class="col-md-12">
                {{ form.email|as_crispy_field }}
              </div>
            </div>

            <div class="row">
              <div class="col-md-6">
                {{ form.first_name|as_crispy_field }}
              </div>
              <div class="col-md-6">
                {{ form.last_name|as_crispy_field }}
              </div>
            </div>

            <div class="row">
              <div class="col-md-6">
                {{ form.country|as_crispy_field }}
              </div>
              <div class="col-md-6">
                {{ form.institution|as_crispy_field }}
              </div>
            </div>
          </div>
          <div class="modal-header">
            <h4 class="modal-title">{% trans 'Your cart' %}</h4>
          </div>
          <div class="model-body">
            {% for element in selected_document|dictsort:'format' %}
              <!-- Display wanted objects -->
            {% endfor %}
          </div>
          <div class="modal-footer">
            <input type="submit" class="btn btn-default" data-dismiss="modal" value="{% trans 'Send' %}"/>
          </div>
        </form>
      </div>
    </div>
  </div>

过程:

这是必需的方法:

  • 用户必须检查一个或多个文档
  • 用户提交选择,并且包含CustomerForm的模式正在打开。
  • 用户填写CustomerForm字段并在Cart part中查看其文档
  • 用户提交客户表单,并发送一封包含先前信息/文档的电子邮件。

我认为我的方法可以工作,但是我不克服调用form_valid函数的问题,我想正确地编写此类。

肯定有丑陋的问题,我谨此致歉。但这不是改善自己的最佳方法,并且不会重现这些问题吗? ;)

谢谢!

编辑:

我做了一些似乎可行的事情。我从模式提交按钮中删除了data-dismiss="modal"。我读到这个属性关闭了我的模态并且没有发布任何表单! 最后,这是做我所做的好方法吗?

是否可以用一个唯一的按钮来替换两个按钮Save documentsSend documents来获取文档并打开模式?

1 个答案:

答案 0 :(得分:0)

我做了一些似乎可行的事情。我从模式提交按钮中删除了data-dismiss =“ modal”。

以前:

<input type="submit" class="btn btn-default" data-dismiss="modal" value="{% trans 'Send' %}"/>

现在:

<input type="submit" class="btn btn-default" value="{% trans 'Send' %}"/>

现在可以使用! 这是因为data-dismiss="modal"关闭了模式,而我不知道。