添加 jQuery 脚本后提交按钮不起作用
Submit button doesn't work after adding jQuery script
我在 Django 应用程序中使用基于 class 的视图。 UpdateView 使用与 CreateView 相同的模板、表单和模型时效果很好。但是 CreateView 提交表单有问题。我按下提交按钮,但没有任何反应。当我从 <head>
标签中删除 <script src="http://code.jquery.com/jquery-3.6.0.slim.min.js" charset="utf-8"></script>
时,它会提交。
但是我需要这个脚本来渲染 SimpleMDEField。
Note
在管理面板中创建并保存商品。
也适用于 js 控制台:
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>
我注意到 js 控制台中出现错误 An invalid form control with name='body_raw' is not focusable
。谷歌搜索问题后,我发现了 question。一个答案很有帮助。
我在表格中添加了 novalidate
。
<form method="post" novalidate>
一切正常。
我在 Django 应用程序中使用基于 class 的视图。 UpdateView 使用与 CreateView 相同的模板、表单和模型时效果很好。但是 CreateView 提交表单有问题。我按下提交按钮,但没有任何反应。当我从 <head>
标签中删除 <script src="http://code.jquery.com/jquery-3.6.0.slim.min.js" charset="utf-8"></script>
时,它会提交。
但是我需要这个脚本来渲染 SimpleMDEField。
Note
在管理面板中创建并保存商品。
也适用于 js 控制台:
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>
我注意到 js 控制台中出现错误 An invalid form control with name='body_raw' is not focusable
。谷歌搜索问题后,我发现了 question。一个答案很有帮助。
我在表格中添加了 novalidate
。
<form method="post" novalidate>
一切正常。