vicodin
vicodin

Reputation: 106

submit button not working in django

In my django template when I render whole form at once, submit button works and forms get submitted or error shows up if there's any:

<form action="" method="POST" >
                {% csrf_token %}
                    <div class="row">
                        <div class="small-12 large-8 columns">
                            {{ form }}
                            <input type="submit" value="submit">
                        </div>
                    </div>
</form>

but when I render like this:

<form action="" method="POST" >
                {% csrf_token %}
                    <div class="row">
                        <div class="small-6 columns">
                            {{ form.name }}
                            <input type="submit" value="submit">
                        </div>
                        <div class="small-6 columns">
                            {{ form.email}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="small-6 columns">
                            {{ form.model_no}}
                        </div>
                        <div class="small-6 columns">
                            {{ form.phone_no}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="small-12 columns">
                            {{ form.problem_details}}
                        </div>
                    </div>
                <div class="row">
                    <div class="small-12 columns">
                        <input type="submit" value="submit">
                    </div>
                </div>
            </form>

on submitting, page just reloads and nothing happens neither form submits nor errors shows up.

urls.py:

from django.conf.urls import patterns, include, url
from django.contrib import admin

    urlpatterns = patterns('',
        url(r'^$', 'query_form.views.contactview', name="home"),
        url(r'^thankyou/', 'query_form.views.thankyou', name="thankyou"),
        url(r'^admin/', include(admin.site.urls)),
    )

views.py: http://pastebin.com/TGzkh7aq

I want to use second method for proper styling. Please help.

I've got answers that I should provide an 'action' to the form but my questions is why the first method working and second not without 'action'.

edit: on using action="{% url 'thankyou' %}" I'm getting following error:

NoReverseMatch at / Reverse for 'thankyou' with arguments '()' and keyword arguments '{}' not found. 0 pattern(s) tried: []

update: I was missing comma in urls.py, that's was causing the above error. I've updated the code.

But now my form is getting submitted because of action even when it is empty without showing any error. Just like a link to thankyou page.

Upvotes: 5

Views: 15826

Answers (6)

Aanish Amir Waseem
Aanish Amir Waseem

Reputation: 311

So basically, I came across the same problem, type="submit" inside a div seems to be the problem. You can solve it by using input tag with the same properties, as for the name you can use the value property of input tag. If you want to know why input tags work and div tags don't please check out the link below

[https://docs.djangoproject.com/en/3.2/topics/forms/][1]

Upvotes: 0

Victor Gitonga
Victor Gitonga

Reputation: 21

There is a probability that you have not added a field on the form which is required hence making it unable to submit

Upvotes: 2

Remo
Remo

Reputation: 11

Did you try action="." ? I think this will work in your case.

Upvotes: 0

Remo
Remo

Reputation: 11

With this template, you will be able to use Twitter Bootstrap with your Django forms

<form class="form-horizontal" action="" method="POST" {% if form.is_multipart %}enctype="multipart/form-data"{% endif %}>
{% csrf_token %}
{{ form.media }}
{% if form.errors %}
    <div class="alert alert-error">
        <ul>
            {% for error in form.non_field_errors %}
                <li>{{ error }}</li>
            {% endfor %}
        </ul>
    </div>
{% endif %}
{% for field in form.visible_fields %}
    <div class="control-group {{ field.html_name }} {% if field.errors %}error{% endif %}">
        <label class="control-label">{{ field.label }}{% if field.field.required %} *{% endif %}</label>
        <div class="controls">
            {{ field }}
            {% if field.errors %}<span class="help-inline">{{ field.errors.as_text }}</span>{% endif %}
        </div>
    </div>
{% endfor %}
{% for field in form.hidden_fields %}
    {{ field }}
{% endfor %}

{% block formsets %}
    {% for formset in inlines %}
        {% include "inline_formset.html" with formset=formset %}
    {% endfor %}        
{% endblock formsets %}

<div class="form-actions">
    <input class="btn btn-primary btn-large" type="submit" value="Submit"/>
    {% block extra_buttons %}
    {% endblock extra_buttons %}
</div>

Upvotes: 1

Joannah Nanjekye
Joannah Nanjekye

Reputation: 469

First try including an action for your form.

Upvotes: 0

catavaran
catavaran

Reputation: 45595

If you take total control of the HTML rendering then you should output the errors by yourself:

{{ form.name.errors }}

Upvotes: 1

Related Questions