Submit button no longer works with pure django forms
I've added bootstrap to my pages and will try to get django crispy forms to work. Actually all I did was pip install django-crispy-forms
add crispy_forms
to INSTALLED_APPS
and change {{ form }}
to {% crispy form %}
in my template (after adding bootstrap and jquery to my static directory):
{% load crispy_forms_tags %}
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
<form action="." method="post">
{% csrf_token %}
{% crispy form %}
<input type="submit" value="Submit" class="btn btn-success">
</form>
This form was used to work just fine. It looks much nicer after the change, but the submit button doesn't do anything else because it moves outside of the form :
I am surprised to see that changing the template affects the layout of the rest of the document. Did I do something wrong or is this a bug?
Django 1.8.1, django-crispy-forms 1.4.0
source to share
Since you are including form tags, csrf tokens, and the submit button in the template yourself, you should use a crispy filter instead of a crispy tag.
<form action="." method="post">
{% csrf_token %}
{{ form|crispy }}
<input type="submit" value="Submit" class="btn btn-success">
</form>
If you want to use a tag, you can define a submit button in FormHelper
. See crispy tags for more information .
source to share
To add a submit button to a form, the crispy_form documentation did it like this:
import floppyforms.__future__ as forms # you can use django own ModelForm here
from crispy_forms.helper import FormHelper
from django.core.urlresolvers import reverse_lazy
class YourForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(YourForm, self).__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_method = 'post' # this line sets your form method to post
self.helper.form_action = reverse_lazy('your_post_url') # this line sets the form action
self.helper.layout = Layout( # the order of the items in this layout is important
'field1_of_your_model', # field1 will appear first in HTML
'field2_of_your_model', # field2 will appear second in HTML
# this is how to add the submit button to your form and since it is the last item in this tuple, it will be rendered last in the HTML
Submit('submit', u'Submit', css_class='btn btn-success'),
)
class Meta:
model = YourModel
Then in your template, all you have to do is
{% load crispy_forms_tags %} {% crispy form %}
What is it. There is no need to write ANY HTML in your template.
I think the whole point of crispy_forms is to define HTML in Python. So you don't have to write a lot of HTML into your template.
Some additional notes:
Since you are using bootstrap. There are three more fields that will be useful to you, inside __init__()
defined above, add them if you need them:
self.helper.form_class = 'form-horizontal' # if you want to have a horizontally layout form
self.helper.label_class = 'col-md-3' # this css class attribute will be added to all of the labels in your form. For instance, the "Username: " label will have 'col-md-3'
self.helper.field_class = 'col-md-9' # this css class attribute will be added to all of the input fields in your form. For isntance, the input text box for "Username" will have 'col-md-9'
source to share