How to fix: Django forms: {{ form }} is not working in a dynamic html page

73 views
Skip to first unread message

Majid Rafiee

unread,
Jun 6, 2019, 7:14:57 PM6/6/19
to Django users
I've created a form in Django:

#forms.py    
   
from django import forms


   
class ContactForm(forms.Form):
    name
= forms.CharField()
    number
= forms.FloatField()
    eail_user
= forms.EmailField()

and imported in in views.py

#views.py
from django.shortcuts import render
from .models import Cards
from cards.forms import ContactForm


def index(request):
    cards = Cards.objects.all()
    return render(request,'card.html', {'cards':cards})


def contact(request):
    form = ContactForm()
    return render(request,'card.html', {'form': form})
This is my base.html
#base.html
{%  load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
   
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
   
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   
<link href="{% static 'css/stylesheet.css' %}" rel="stylesheet" type="text/css">
   
<!------ Include the above in your HEAD tag ---------->
   
<meta charset="UTF-8">
   
<title>Title</title>
</
head>
<body>
<section id="team" class="pb-5">
   
<div class="container">
       
<h5 class="section-title h1">OUR TEAM</h5>
        <div class="row">
            {% block content %}
            {% endblock %}
        </
div>
   
</div>
</
section>
</body>
</
html>

And here is the card.html that is extended from base.html

#card.html
{% extends 'base.html' %}

{% block content %}
   
<!-- Team -->
   
{% for card in cards %}
       
<!-- Team member -->
       
<div class="col-xs-12 col-sm-6 col-md-4">
           
<div class="image-flip" ontouchstart="this.classList.toggle('hover');">
               
<div class="mainflip">
                   
<div class="frontside">
                       
<div class="card">
                           
<div class="card-body text-center">
                               
<p><img class=" img-fluid"
                                        src
="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_01.png"
                                        alt
="card image"></p>
                               
<h4 class="card-title">{{ card.name }}</h4>
                               
<p class="card-text">{{ card.description }}</p>
                               
<a href="#" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a>
                           
</div>
                        </
div>
                   
</div>
                    <div class="backside">
                        <div class="card">
                            <div class="card-body text-center mt-4">
                                <h4 class="card-title">{{ card.name }}</
h4>
                               
<!--<p class="card-text"> {{ card.back_description }}-->
                               
<form action="/your-name/" method="post">
                                   
{% csrf_token %}
                                   
{{ form }}
                                   
<input type="submit" value="Submit">
                               
</form>
                                <!--</
p> -->
                               
<ul class="list-inline">
                                   
<li class="list-inline-item">
                                       
<a class="social-icon text-xs-center" target="_blank" href="#">
                                           
<i class="fa fa-facebook"></i>
                                       
</a>
                                    </
li>
                                   
<li class="list-inline-item">
                                       
<a class="social-icon text-xs-center" target="_blank" href="#">
                                           
<i class="fa fa-twitter"></i>
                                       
</a>
                                    </
li>
                                   
<li class="list-inline-item">
                                       
<a class="social-icon text-xs-center" target="_blank" href="#">
                                           
<i class="fa fa-skype"></i>
                                       
</a>
                                    </
li>
                                   
<li class="list-inline-item">
                                       
<a class="social-icon text-xs-center" target="_blank" href="#">
                                           
<i class="fa fa-google"></i>
                                       
</a>
                                    </
li>
                               
</ul>
                            </
div>
                       
</div>
                    </
div>
               
</div>
            </
div>
       
</div>
        <!-- ./
Team member -->
   
{% endfor %}

{% endblock %}

As you may notice, I've called form by {{ form }} inside <form> tag in card.html but the issue is that it just shows a Submit botton and ignores {{ form }}. Any idea how to solve the issue?
I also bring urls.py in cards app and main urls:
#urls.py in cards
from django.urls import path
from . import views


urlpatterns
= [
 path
('', views.index),
 path
('form/', views.contact),
]


#urls.py in main directory

from django.contrib import admin
from django.urls import path, include


urlpatterns
= [
 path
('admin/', admin.site.urls),
 path
('calculator_one_input/', include('calculator_one_input.urls')),
 path
('cards/', include('cards.urls')),
 path
('cards/form/', include('cards.urls')),
]


I looked for a solution for three days and still I have no idea how to solve this issue. I will be so appreciated if someone give me a clear clue how to solve. Thanks

Joe Reitman

unread,
Jun 7, 2019, 12:07:18 AM6/7/19
to Django users
Interesting problem. It won't display because the form is inside a for-loop. Django Template language looks at variables inside a for-loop differently. Basically it looks for a collection. Since {{ form }} is not a collection, it just ignores it.

I'm not sure how you can create multiple forms like that. But I would be interested in knowing. 

Joe Reitman

unread,
Jun 7, 2019, 12:22:53 AM6/7/19
to Django users
Update. 

You can do this by hard coding the HTML form in the template. If you want to gather the data a user enters, each form will have to be uniquely identifiable and your view will have to determine which form its getting post data from. You can put the card index number in the button value and code your view to handle it based on the button value. 

Delcy John

unread,
Jun 7, 2019, 7:30:21 AM6/7/19
to django...@googlegroups.com
i think the error is in form.py,you must put indentation in class

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/9ea7647f-1fb8-429c-8988-0d07459678ff%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Marvelous Ikechi

unread,
Jun 9, 2019, 5:30:51 PM6/9/19
to django...@googlegroups.com

I couldn't find a description field in the creation of your ContactForm. Maybe it's an oversight from me. However, if it isn't, I'm not expecting to see a {{card.description}} in your cards.html page.


Sim

unread,
Jun 10, 2019, 7:18:48 AM6/10/19
to django...@googlegroups.com
Form should be provided in context render of index view . Try this please and let me know if it worked
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.

To post to this group, send email to django...@googlegroups.com.
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAG%3D1guzyCYJ_-fP_fgMfyF%3DjCpgdNMMN-at-QULsYW0YDBZpPw%40mail.gmail.com.
Reply all
Reply to author
Forward
0 new messages