提交按钮在使用脆皮的 Django 表单中不起作用

时间:2021-05-20 22:20:33

标签: python django django-forms django-crispy-forms

我在 Django 中有一个联系表单,我在模板中使用了脆皮,但是在类基本视图和函数基本视图中,我的提交按钮不起作用,我没有错误。 这是我的 fbv 代码。我也用cbv试过

我的模板使用 jquery,bootstrap,moment.js

这是我的代码:

models.py

class ContactUs(models.Model):
    fullname = models.CharField(max_length=150, verbose_name="Full Name")
    email = models.EmailField(max_length=150, verbose_name="Email")
    message = models.TextField(verbose_name="Message")
    is_read = models.BooleanField(default=False)

    class Meta:
        verbose_name = "contact us"
        verbose_name_plural = "Messages"

forms.py:

    class CreateContactForm(forms.Form):
        fullname = forms.CharField(widget=forms.TextInput(attrs={"placeholder": "Full Name"}),
                                   validators=[
                                       validators.MaxLengthValidator(150,
                                                                     "Your name should be less than 150 character")
                                   ],
                                   )
        email = forms.EmailField(widget=forms.EmailInput(attrs={"placeholder": "Email address"}),
                                 validators=[
                                     validators.MaxLengthValidator(150,
                                                                   "Your email should be less than 150 character")
                                 ],
                                 )
        message = forms.CharField(widget=forms.Textarea(attrs={"placeholder": "Your Message"}))

views.py:

     def contact_page(request):
       contact_form = CreateContactForm(request.POST or None)
       if contact_form.is_valid():
         fullname = contact_form.cleaned_data.get('fullname')
         email = contact_form.cleaned_data.get('email')
         message = contact_form.cleaned_data.get('message')
         ContactUs.objects.create(fullname=fullname, email=email, message=message, is_read=False)
         # todo : show user a success message
         contact_form = CreateContactForm(request.POST or None)
    context = {"contact_form": contact_form}
    return render(request, 'contact_page.html', context)

模板:

<form id="contact-form" class="contact-form" data-toggle="validator" novalidate="true" method="post" action="">
  {% csrf_token %}
  <div class="row">
    <div class="form-group col-12 col-md-6">
      {{ contact_form.fullname|as_crispy_field }} {% for error in contact_form.fullname.errors %}
      <div class="help-block with-errors">{{ error }}</div>
      {% endfor %}
    </div>
    <div class="form-group col-12 col-md-6">
      {{ contact_form.email|as_crispy_field }} {% for error in contact_form.email.errors %}
      <div class="help-block with-errors">{{ error }}</div>
      {% endfor %}
    </div>
    <div class="form-group col-12 col-md-12">
      {{ contact_form.message|as_crispy_field }} {% for error in contact_form.message.errors %}
      <div class="help-block with-errors">{{ error }}</div>
      {% endfor %}
    </div>
  </div>
  <div class="row">
    <div class="col-12 col-md-6 order-2 order-md-1 text-center text-md-left">
      <div id="validator-contact" class="hidden"></div>
    </div>
    <div class="col-12 col-md-6 order-1 order-md-2 text-right">
      <button type="submit" name="submit" class="btn"><i class="font-icon icon-send"></i> Send Message</button>
    </div>
  </div>
</form>

1 个答案:

答案 0 :(得分:0)

尝试将“保存”添加到提交按钮类。

在将联系人数据保存到数据库后,您的 contact_page 视图也不会执行任何操作。如果您将在 JS 中进行弹出确认,则不需要第二次实例化 contact_form。或者,如果您想重定向用户:

def contact_page(request):
    contact_form = CreateContactForm(request.POST or None)
    if contact_form.is_valid():
        fullname = contact_form.cleaned_data.get('fullname')
        email = contact_form.cleaned_data.get('email')
        message = contact_form.cleaned_data.get('message')
        ContactUs.objects.create(
            fullname=fullname,
            email=email,
            message=message,
            is_read=False
        )
        return redirect('some-view')
    context = {"contact_form": contact_form}
    return render(request, 'contact_page.html', context)