0

I use class-based views in a Django app. UpdateView works fine with the same template, form and model like CreateView. But CreateView has the problem with submitting a form. I press the submit button and nothing happens. When I remove <script src="http://code.jquery.com/jquery-3.6.0.slim.min.js" charset="utf-8"></script> from <head> tag it submits. But I need this script for rendering SimpleMDEField.

Note creates and saves good in the admin panel. Also works this on js console:

let form = document.getElementById('add');
form.submit()

models.py

class Note(models.Model):
    title = models.CharField(max_length=100, null=False, blank=False)
    slug = models.SlugField(max_length=254, editable=False, unique=True)
    author = models.ForeignKey(
        User, on_delete=models.SET_NULL, null=True, editable=False
    )
    source = models.URLField(blank=True, default='')
    body_raw = SimpleMDEField()
    body_html = models.TextField(max_length=40000, default='', blank=True)

views.py

@method_decorator(login_required, name='dispatch')
class NoteCreateView(CreateView):
    model = Note
    fields = ['title', 'source', 'body_raw']
    template_name = 'notes/create.html'

    def form_valid(self, form):
        form.instance.author = self.request.user
        return super().form_valid(form)

urls.py

urlpatterns = [
    path('', NoteList.as_view(), name='home'),
    path('view/<str:slug>/', NoteDetailView.as_view(), name='note'),
    path('add/', NoteCreateView.as_view(), name='add'),
    path('update/<str:slug>/', NoteUpdateView.as_view(), name='update'),
    path('delete/<str:slug>/', NoteDeleteView.as_view(), name='delete'),
]

create.html

{% extends 'layouts/base.html' %}

{% block title %}Create Note{% endblock %}

{% block extrahead %}
    <script src="http://code.jquery.com/jquery-3.6.0.slim.min.js" charset="utf-8"></script>
    {{ form.media }}
{% endblock %}

{% block main %}

    <form method="post" id="add">{% csrf_token %}
        {{ form.as_p }}
        <input type="submit" name="send" value="Save Note">
    </form>

{% endblock %}

base.html

<!DOCTYPE html>

{% load static %}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>{% block title %}project name{% endblock %}</title>
    {% block extrahead %}{% endblock %}
</head>

</body>
    <div style="max-width: 1490px; padding-left: 40px; padding-right: 40px;">
        {% block main %}{% endblock %}
    </div>
</body>
</html>
Pavel Loginov
  • 51
  • 5

1 Answers1

0

I noticed an error An invalid form control with name='body_raw' is not focusable in js console. I found a question after googling the problem. And one answer helped.

I added novalidate to the form.

<form method="post" novalidate>

Everything works fine.

Pavel Loginov
  • 51
  • 5