1

I need to edit an existing form and make changes to the database. So to do this I use UpdateView based class. When I use 'fields' everything works correctly, but there are no styles applied to the form, so I'm trying to use 'form_class' instead and when I click submit button changes are not saved. Please help me with this issue.

(urls)

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('register/', views.register_page, name='register'),
    path('login/', views.login_page, name='login'),
    path('logout/', views.logout_user, name='logout'),
    path('new_todo/', views.new_todo, name='new_todo'),
    path('update_todo/<int:pk>', views.UpdateTodo.as_view(), name='update_todo'),
    path('delete_todo/<int:pk>', views.delete_todo, name='delete_todo'),
]

(views)

class UpdateTodo(UpdateView):
    model = Todos
    template_name = 'todoapp/new_todo.html'
    # fields = ['title', 'notes', 'date', 'deadline']
    form_class = TodosForm
    success_url = "/"

(models)

from django.db import models

class Todos(models.Model):
    title = models.CharField('Title', max_length=50)
    notes = models.TextField('Note')
    date = models.DateField('Date')
    deadline = models.DateField('Deadline')

    def __str__(self):
        return f"Todo: {self.title}"

    def get_absolute_url(self):
        return f'/{self.id}'

(forms)

class TodosForm(ModelForm):
    class Meta:
        model = Todos
        fields = ['title', 'notes', 'date', 'deadline']

        widgets = {
            'title': TextInput(attrs={
                'class': 'form-control',
                'placeholder': 'Title'
            }),

            'notes': Textarea(attrs={
                'class': 'form-control',
                'placeholder': 'Notes'
            }),

            'date': DateTimeInput(attrs={
                'class': 'form-control',
                'placeholder': 'Date'
            }),

            'deadline': DateTimeInput(attrs={
                'class': 'form-control',
                'placeholder': 'Deadline'
            })
        }

(HTML template)

{% extends 'base.html' %}

{% block content %}
    <form method="post" class="new-todo-form">
        {% csrf_token %}
        <h1 style="padding-bottom: 20px;">New todo</h1>
        {{ form.title }}<br>
        {{ form.notes }}<br>
        {{ form.date }}<br>
        {{ form.deadline }}<br>
        <button class="create-btn" type="submit">Create</button>
        <button class="clear-btn" type="reset">Clear</button>
    </form>
{% endblock %}
Akim
  • 11
  • 1

1 Answers1

0

You need to add {{form.media}} to get relevant css/js code in your template.

Change your code to include it:

{% block content %}
    <form method="post" class="new-todo-form">
        {% csrf_token %}
        <h1 style="padding-bottom: 20px;">New todo</h1>
        {{ form.title }}<br>
        {{ form.notes }}<br>
        {{ form.date }}<br>
        {{ form.deadline }}<br>
        {{ form.media  }} <!--- Adds CSS/JS to template --->
        <button class="create-btn" type="submit">Create</button>
        <button class="clear-btn" type="reset">Clear</button>
    </form>
{% endblock %}
Lewis F
  • 34
  • 7
  • Unfortunately it still does not work. Maybe you understand me quite wrong. I mean that when I add 'fields = ['title', 'notes', 'date', 'deadline']' to my UpdateTodo class in views.py form changes and everything is ok except that there are no css styles applied to the form, so it is just html. But when I use 'form_class = TodosForm' in the class, css styles are applied to the form but it does not function, so form is not changing. – Akim Mar 30 '23 at 18:59