添加jQuery脚本后提交按钮不起作用

Posted

技术标签:

【中文标题】添加jQuery脚本后提交按钮不起作用【英文标题】：Submit button doesn't work after adding jQuery script 【发布时间】：2021-07-01 14:39:16 【问题描述】：

我在 Django 应用程序中使用基于类的视图。 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>

【问题讨论】：

【参考方案1】：

我在 js 控制台中发现了一个错误 An invalid form control with name='body_raw' is not focusable。在谷歌搜索问题后，我找到了question。一个答案有帮助。

我在表单中添加了novalidate。

<form method="post" novalidate>

一切正常。

【讨论】：

以上是关于添加jQuery脚本后提交按钮不起作用的主要内容，如果未能解决你的问题，请参考以下文章

jquery：重置后禁用/启用按钮不起作用

我在表单上使用 jquery .validate() 后 jQuery .submit() 不起作用

添加jquery键盘后，jquery按钮单击事件不起作用

当javascript在元素上调用提交时，jQuery覆盖表单提交不起作用

启用/禁用表单提交按钮不起作用

使用 django ajax jquery 提交一个文件不起作用的表单