I have django application with authentication and I have dropdown menu inside.
Before I did it like:
<select name="country" id="id_category" data="{{ data.country }}">
{% for each in living_countries_list %}
<option name="country" value="{{ each.0 }}" class="living_countries">{{ each.1 }}</option>
% endfor %}
</select>
And now I changed it to:
<input list="brow" placeholder="Search for your country..." class="input_country">
<datalist id="brow">
{% for each in living_countries_list %}
<option name="country" value="{{ each.0 }}" class="living_countries">{{ each.1 }}</option>
{% endfor %}
</datalist>
<p class="country_text">Please select your living country</p>
In my views.py file I passed context like:
country = request.POST.get('country')
professors = models.Professor.objects.all()
living_countries_list = LIVING_COUNTRIES
print(country)
In models.py I have options like:
LIVING_COUNTRIES = [
('AFGANISTAN', 'Afganistan'),
('ALBANIA', 'Albania'),
('ALGERIA', 'Algeria'),
('ANGORRA', 'Andorra'),
('ANGOLA', 'Angola')]
class Professor(models.Model):
country_living = models.CharField(max_length=50, choices=LIVING_COUNTRIES, default=FRESHMAN, blank=True, null=True)
So I have few options which are displayed either way but in changed I can type in input and that's what I want to be able to do.
If you want me to post anything else let me know in comments
You don't need to create forms with traditional methods in django. Create first FormSet in views.py:
from django.shortcuts import render
from . import models
from django.forms import modelformset_factory
def formpageview(request):
ProfessorFormSet = modelformset_factory(models.Professor, fields=('country_living',))
queryset = models.Professor.objects.filter(pk=1) # you can make the filter whatever you want it doesn't have to be that way
if request.method == 'POST':
formset = ProfessorFormSet(request.POST, request.FILES, queryset=queryset,)
if formset.is_valid():
formset.save()
# do something.
else:
formset = ProfessorFormSet(queryset=queryset,)
return render(request, 'form.html', {'formset': formset})
and then use this formset in form.html:
<form method="post">
{% csrf_token %}
{{ formset.management_form }}
{% for form in formset %}
{{ form }}
{% endfor %}
<button type='submit'>Submit</button>
</form>
You should review the documentation
Related
How are you?
I m totally new in Django.I designed a page and I wanted to show a django form(edit or create) in a well designed HTML page. but i do not know how.
This is my owner method:
class OwnerUpdateView(LoginRequiredMixin, UpdateView):
"""
queryset to the requesting user.
"""
def get_queryset(self):
print('update get_queryset called')
""" Limit a User to only modifying their own data. """
qs = super(OwnerUpdateView, self).get_queryset()
return qs.filter(user=self.request.user)
class OwnerCreateView(LoginRequiredMixin, CreateView):
"""
Sub-class of the CreateView to automatically pass the Request to the Form
and add the owner to the saved object.
"""
# Saves the form instance, sets the current object for the view, and redirects to get_success_url().
def form_valid(self, form):
print('form_valid called')
object = form.save(commit=False)
object.user = self.request.user
object.save()
return super(OwnerCreateView, self).form_valid(form)
This is my views.py
class TaskUpdateView(OwnerUpdateView):
model = Task
fields = ["title", "text", "endDate"]
class TaskCreateView(OwnerCreateView):
model = Task
fields = ["title","text","status","endDate"]
This is my urls.py:
app_name='task'
urlpatterns = [
path('', views.TaskListView.as_view(), name='all'),
path('task/<int:pk>/', views.TaskDetailView.as_view(), name='detail'),
path('task/create', views.TaskCreateView.as_view(success_url=reverse_lazy('task:all')), name='task_create'),
path('task/update/<int:pk>', views.TaskUpdateView.as_view(success_url=reverse_lazy('task:all')),
name='task_update'),
path('task/delete/<int:pk>', views.TaskDeleteView.as_view(success_url=reverse_lazy('task:all')),
name='task_delete'),
path("accounts/login/", views.login, name='login'),
path("accounts/logout/", views.logout, name='logout'),
]
And this is the models.py:
class Task(models.Model):
title=models.CharField(max_length=250)
text=models.TextField()
user=models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, null=False)
status=models.ForeignKey('Status',on_delete=models.SET_NULL,null=True)
startDate=models.DateTimeField(auto_now_add=True)
endDate=models.DateField(null=True)
def __str__(self):
return self.title
class Status(models.Model):
name=models.CharField(max_length=250)
def __str__(self):
return self.name
And this is where these both function work:
{%extends 'base.html'%}
{% block content %}
<form action="" method="post">
{% csrf_token %}
<table>{{ form.as_table }}</table>
<input type="submit" value="Submit">
{# <input type="submit" onclick="window.location='{% url 'project:all' %}' ; return false;" value="Cancel">#}
</form>
{% endblock %}
How can i separate each element of this form and put it in a better designed page?
Thanks
There are two ways:
Option 1:
Loop over the form fields and render them individually:
{% for field in form %}
<div class="form-group">
{{ field.errors }}
{{ field.label_tag }} {{ field }}
{% if field.help_text %}
<span class="form-text">{{ field.help_text|safe }}</span>
{% endif %}
</div>
{% endfor %}
See docs for more.
Option 2:
You can manually create form inputs and give them the correct field name attribute. This gives you more control but also requires more work:
<div class="form-group"
<input
type="text"
name="title"
value="{{ form.title.value }}"
class="form-control {% if form.title.errors %}is-invalid{% endif %}"
>
{% if form.title.help_text%}
<span class="form-text">{{ form.title.help_text|safe }}</span>
{% endif %}
<div class="invalid-feedback">{{ form.title.errors }}</div>
</div>
<!-- now do the same for other fields -->
The post requests from the frontend do not get saved in the database, without any error shown. However, when I manually add entries from the admin panel, it shows on the frontend.
My index.html(form part):
<form class="main__input--form" method="POST">
{% csrf_token %}
<p class="main__input--text">
<textarea name="content" id="content" class="main__input--content" cols="35" rows="8" aria-label="Entry content" placeholder="Enter text here..."></textarea>
</p>
<button class="main__input--submit" type="submit">Vent</button>
</form>
My extension of index which loops through the database entries:
{% for obj in all_vents %}
<div>
<h1>{{obj.vent}}</h1>
</div>
<br />
{% endfor %}
My models.py:
class Vents(models.Model):
vent = models.CharField(max_length=10000)
def __str__(self):
return self.vent
My forms.py:
from django import forms
from .models import Vents
class VentForm(forms.ModelForm):
class Meta:
model = Vents
fields = ['vent']
My views.py:
from django.shortcuts import render, redirect
from .forms import VentForm
from .models import Vents
def ventout(request):
if request.method == "POST":
form = VentForm(request.POST or None)
if form.is_valid():
form.save()
return redirect("ventout")
else:
all_vents = Vents.objects.all()
return render(request, "ventout.html", {"all_vents": all_vents})
Views:
def ventout(request):
all_vents = Vents.objects.all()
if request.method == "POST":
form = VentForm(request.POST or None)
if form.is_valid():
form.save()
return redirect("ventout")
else:
form = VentForm()
context = {"all_vents": all_vents, "form":form}
return render(request, "ventout.html", context)
Template:
<form class="main__input--form" method="POST">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="main__input--submit">Vent</button>
</form>
you could install/use "crispy_forms_tags" to make the form look better,
https://django-crispy-forms.readthedocs.io/en/latest/index.html
if you want to go further you could install/use "widget_tweaks"
https://pypi.org/project/django-widget-tweaks/
Your index.html from part should have {{ form }} form tag, as I guess.
Try Using following code
<form class="main__input--form" method="POST">
{% csrf_token %}
{{ form }}
<p class="main__input--text">
<textarea name="content" id="content" class="main__input--content"
cols="35" rows="8" aria-label="Entry content" placeholder="Enter text here...">
</textarea>
</p>
<button class="main__input--submit" type="submit" value="Submit">Vent</button>
</form>
Am trying to customize my checkbox inputs to look like this [what i want to archive]
so i tried this...
profile.html
<ul class="wt-accountinfo">
{% for key, value in form.interests.field.choices %}
<li>
<div class="wt-on-off pull-right">
<input type="checkbox" id="{{ value }}" value="{{ key }}" name="interests">
<label for="{{ value }}"><i></i></label>
</div>
<span>{{ value | title }}</span>
</li>
{% endfor %}
</ul>
which renders the html fine but highlight the select fields from the database
but using {{ form.interest }} highlights the selected checked boxes from the database
here is the forms.py
class ProfileForm(forms.ModelForm):
interests = forms.ModelMultipleChoiceField(
queryset=JobsCategories.objects.all(), widget=forms.CheckboxSelectMultiple(),
required=False
)
class Meta:
model = Profile
fields = ['interests']
and here is the models.py
class Profile(models.Model):
user = models.OneToOneField(User, on_delete=models.CASCADE,
interests = models.ManyToManyField(Categories, related_name='interests', null=True, blank=True)
def __str__(self):
return f'{self.user.first_name} {self.user.last_name}'
in the views.py
def dashboard_profile(request):
if request.method == 'POST':
form = ProfileForm(request.POST, request.FILES, instance=request.user.profile)
account_form = AccountForm(request.POST, instance=request.user)
if form.is_valid() and account_form.is_valid():
f_interests = form.save(commit=False)
for i in request.POST.getlist('interest'):
f_interests.interest.update(i)
f_interests.save()
form.save_m2m()
account_form.save()
return redirect('index')
else:
form = ProfileForm(instance=request.user.profile)
account_form = AccountForm(instance=request.user)
context = {
'form': form,
'account_form': account_form,
}
return render(request, 'dashboard_profile.html', context)
NOTE!!! if i select the options i want and click save, it saves the options i checked to the database
this is it
this is it in the admins section
admin section
admin section 2
and also when i use {{ form.interests }} in the the template it renders fine and highlights the checked option from the database but its not styled
[how it looks like when i use {{ form.interests }}]
i know am missing somtehing in the profile.html so please help me out Thanks.
You're missing logic within your input tag to apply the existing value of the field choice.
<ul class="wt-accountinfo">
{% for key, value in form.interests.field.choices %}
<li>
<div class="wt-on-off pull-right">
<input type="checkbox"
id="{{ value }}"
value="{{ key }}"
name="interests"
{% if value %}checked{% endif %}>
<label for="{{ value }}"><i></i></label>
</div>
<span>{{ value | title }}</span>
</li>
{% endfor %}
</ul>
I can't seem to get this right, and I have viewed almost every like post. And now I have no clue what my code is doing. I have an index page, that has a small form. I just want to use this form to query my db and filter the results. I used django-filters on another page, and it works perfectly, but I can't seem to pass the data from my index page's form to the next view. Here is my code:
urls.py
from django.urls import path
from .views import IndexView
from . import views
urlpatterns = [
path('', IndexView.as_view(), name='index'),
path('search/', views.search, name='search'),
]
views.py
from django.db.models import Max, Min
from django.shortcuts import render
from django.views.generic import FormView
from .filters import ProductFilter
from .forms import ProductSearchForm
from .models import LengthRange, Hull, PowerConfiguration, SpeedRange, Product
class IndexView(FormView):
template_name = 'index.html'
form_class = ProductSearchForm
success_url = "search/"
def get_context_data(self, **kwargs):
context = super(IndexView, self).get_context_data(**kwargs)
context['length_ranges'] = LengthRange.objects.all().order_by('pk')
context['hull_types'] = Hull.objects.all().order_by('pk')
context['power_configs'] = PowerConfiguration.objects.all().order_by('pk')
context['speed_ranges'] = SpeedRange.objects.all().order_by('pk')
context['price'] = Product.objects.all().aggregate(Min('price'), Max('price'))
return context
def form_valid(self, form):
# This method is called when valid form data has been POSTed.
# It should return an HttpResponse.
# form.send_email()
# print "form is valid"
return super(IndexView, self).form_valid(form)
def search(request):
product_list = Product.objects.all()
product_filter = ProductFilter(request.GET, queryset=product_list)
return render(request, 'product_list.html', {'filter': product_filter})
forms.py
from django.forms import ModelForm
from .models import Product
class ProductSearchForm(ModelForm):
class Meta:
model = Product
fields = ('length_range', 'hull_type', 'price', 'power', 'speed', 'hull_only_available')
product_list.html
{% load humanize %}
<html>
<form method="get">
{{ filter.form.as_p }}
<button type="submit">Search</button>
</form>
<ul>
{% for product in filter.qs %}
<li>{{ product.vendor }} {{ product.product_model }} - ${{ product.price|intcomma }}</li>
{% endfor %}
</ul>
</html>
index.html
<form class="nl-form" action="{% url 'boatsales:search' %}" method="post">
{% csrf_token %}
A boat with a length of
<select>
<option value="*" selected>any size</option>
{% for length in length_ranges %}
<option value="{{ length.pk }}">{{ length.range }}</option>
{% endfor %}
</select>
, with hull type of
<select>
<option value="*" selected>any</option>
{% for hull in hull_types %}
<option value="{{ hull.pk }}">{{ hull.type }}</option>
{% endfor %}
</select>
with
<select>
<option value="*" selected>any</option>
{% for power in power_configs %}
<option value="{{ power.pk }}">a {{ power.configuration }}</option>
{% endfor %}
</select>
power
configuration and a top speed between
<select>
<option value="*" selected>any MPH</option>
{% for speed in speed_ranges %}
<option value="{{ speed.pk }}">{{ speed.range }} MPH</option>
{% endfor %}
</select>.
My budget is from <input type="text" value="{{ price.price__min|intword }}"
placeholder="{{ price.price__min|intword }}"
data-subline="Our current lowest price is: <em>{{ price__min|intword }}</em>"/>
to
<input
type="text" value="{{ price.price__max|intword }}"
placeholder="{{ price.price__min|intword }}"
data-subline="Our current highest price is: <em>{{ price.price__min|intword }}</em>"/>
and hull only
availability <select>
<option value="False" selected>is not</option>
<option value="True">is</option>
</select> a concern.
<div class="container">
<button type="submit"
class="btn-a btn-a_size_large btn-a_color_theme">
Show me the results!
</button>
</div>
</form>
I know this looks like a complete mess right now, because I'm getting different advice from multiple sources. I just can't seem to get the functionality correct.
The issue here I think is that the form is posting its data to the search() view, but that view is using request.GET when transferring the data to the ProductFilter, and request.GET will be empty.
Pass request.POST instead:
product_filter = ProductFilter(request.POST, queryset=product_list)
Had to modify my IndexView and my form, but it now passes the values via a get request and pass the kwargs to the next view. Here is the current code:
form.py
class ProductSearchForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(ProductSearchForm, self).__init__(*args, **kwargs)
self.fields['length_range'].empty_label = "any size"
self.fields['hull_type'].empty_label = "any type"
self.fields['power'].empty_label = "any type"
self.fields['speed'].empty_label = "any speed"
self.fields['hull_only_available'].empty_label = None
# self.fields['price'].widget.attrs['min'] = Product.price
# self.fields['price'].widget.attrs['max'] = Product.price
class Meta:
model = Product
fields = ('length_range', 'hull_type', 'price', 'power', 'speed', 'hull_only_available')
views.py
class IndexView(FormView):
template_name = 'index.html'
form_class = ProductSearchForm
success_url = "search/"
def get_context_data(self, **kwargs):
context = super(IndexView, self).get_context_data(**kwargs)
context['length_ranges'] = LengthRange.objects.all().order_by('pk')
context['hull_types'] = Hull.objects.all().order_by('pk')
context['power_configs'] = PowerConfiguration.objects.all().order_by('pk')
context['speed_ranges'] = SpeedRange.objects.all().order_by('pk')
context['price'] = Product.objects.all().aggregate(Min('price'), Max('price'))
return context
def get_form_kwargs(self):
kwargs = super(IndexView, self).get_form_kwargs()
return kwargs
I am working on my first django app. I am building an app that allows the user to rate beer. I want my user to be able to edit an entry they've already created. I take them to a ModelForm, and ask for their entry. When the POST method is called, my data is invalid. Here is my model.py:
from django.db import models
class Rating(models.Model):
beer_name = models.TextField()
score = models.DecimalField(max_digits=2, decimal_places=1)
notes = models.TextField(blank=True)
brewer = models.TextField(blank=True)
and forms.py:
from django import forms
from ratings.models import Rating
class RatingForm(forms.ModelForm):
class Meta:
model = Rating
fields = ['beer_name', 'score', 'notes', 'brewer']
Here is the views.py of my edit function:
def edit(request, row_id):
rating = get_object_or_404(Rating, pk=row_id)
if request.method == "POST":
form = RatingForm(request.POST, instance=rating)
if form.is_valid():
form.save()
return redirect(home)
else:
return HttpResponse("Invalid entry.")
else:
context = {'form': rating}
form = RatingForm(instance=rating)
return render(
request,
'ratings/entry_def.html',
context
)
However, every time the POST is called I get an "Invalid entry." HttpResponse, meaning my form.is_valid() is being returned False. Here is my template:
{% extends "base.html" %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<h2>Edit Rating</h2>
<form role="form" method="post">
{% csrf_token %}
<p>Beer Name: <textarea>{{ form.beer_name }}</textarea></p>
<p>Score: <input type="text" name="BeerScore" value="{{ form.score }}"></p>
<p>Notes: <textarea>{{ form.notes }}</textarea></p>
<p>Brewer: <textarea>{{ form.brewer }}</textarea></p>
<p><button type="submit" class="save btn btn-primary">Save</button></p>
<p><button type="reset" class="btn btn-primary">Cancel</button></p>
</form>
</div>
</div>
</div>
{% endblock %}
So when I press my Save button, I am getting the response. Here is my edit url in urls.py:
urlpatterns = [
...
url(r'rating/edit/(?P<row_id>[0-9]+)/$', edit , name='rating-edit'),
]
You're wrapping fields in other fields which don't have name attributes. This is most likely causing the values to be excluded from the request.POST data.
Additionally, Django form fields all have a corresponding HTML widget. So there's really no need to render the HTML by hand, unless you need to.
Change your template code to:
<p>
{{ form.beer_name.label }}: {{ form.beer_name }}
{% if form.beer_name.errors %}
<br />{{ form.beer_name.errors }}
{% endif %}{# repeat for other fields as needed #}
</p>
<p>{{ form.score.label }}: {{ form.score }}</p>
<p>{{ form.notes.label }}: {{ form.notes }}</p>
<p>{{ form.brewer.label }}: {{ form.brewer }}</p>
<p><button type="submit" class="save btn btn-primary">Save</button></p>
<p><button type="reset" class="btn btn-primary">Cancel</button></p>
If you need to change the widget, do so at the form class level:
class RatingForm(forms.ModelForm):
class Meta:
model = Rating
def __init__(self, *args, **kwargs):
super(RatingForm, self).__init__(*args, **kwargs)
self.fields['notes'].widget = forms.Textarea()
This way, Django manages the attributes and binding for you.
Your view can also use some cleanup:
def edit(request, row_id):
rating = get_object_or_404(Rating, pk=row_id)
form = RatingForm(request.POST or None, instance=rating)
if request.method == "POST" and form.is_valid():
form.save()
return redirect(home)
context = {'form': rating}
return render(request, 'ratings/entry_def.html', context)