Вызов представления через ajax с кнопкой submit работает, но нажатие клавиши enter просто отображает словарь ajax

У меня есть приложение todo list, которое добавляет объект Task в базу данных и добавляет его на страницу, это работает без проблем. Однако это работает только когда я нажимаю кнопку submit, если я нажимаю клавишу enter, я просто вижу ajax данные в браузере в таком виде:

 {"task": {"id": 1, "title": "example task", "completed": false}}

и мне интересно, почему так происходит и есть ли способ изменить эту функциональность? В учебнике, которому я следую, упоминается, что на моей форме я должен использовать <button type="button">, а не <input type = "submit">, потому что лестница будет "отправлять данные формы непосредственно в представление TaskList, но мы хотим использовать другой способ отправки запросов, поэтому нам нужно отключить это поведение". Я предполагаю, что именно это происходит, когда я нажимаю клавишу ввода

Код:

html:

<form id = "createTaskForm" method="post" data-url = "{% url 'task_list_url' %}">
  {% csrf_token %}
  {% for field in form %}
    {{ field }}
  {% endfor %}
  <button id = "createButton" type="button">Sumbit</button>
 </form>
    
    
<div id = "taskList">
  {% for task in tasks %}
     {{task.title}}
  {% endfor %}
</div>

JavaScript/jQuery:

$(document).ready(function(){

  $('#createButton').click(function() {
    // Get form data
    let serializedData = $('#createTaskForm').serialize();


    // Now pass it to TaskList view
    $.ajax({
      url: $("#createTaskForm").data('url'),
      data: serializedData,
      type: 'post',
      success: function(response) {
        $("#taskList").append(`${response.task.title}`)
      }
    })
  });
});

Специфика Python: models.py:

class Task(models.Model):
    title = models.CharField(max_length=200)
    date = models.DateTimeField(auto_now_add=True)
    completed = models.BooleanField(default=False)

urls.py:

path('tasks/', TaskList.as_view(), name = 'task_list_url')

views.py:

class TaskList(View):
    def get(self, request):
        form = TaskForm()
        tasks = Task.objects.all()
        return render(request, 'task/task_list.html', {'form': form, 'tasks': tasks})

    def post(self, request):
        form = TaskForm(request.POST)
        if form.is_valid():
            new_task = form.save()
            # send task object as json response, this return value is what is in success: function(response)
            return JsonResponse({'task': model_to_dict(new_task)}, status=200)
        else:
            return redirect('task_list_url')

Спасибо за любую помощь в этом вопросе.

$(document).ready(function(){

  $('#createTaskForm').on("submit", function() {
    // Get form data
    let serializedData = $('#createTaskForm').serialize();


    // Now pass it to TaskList view
    $.ajax({
      url: $("#createTaskForm").data('url'),
      data: serializedData,
      type: 'post',
      success: function(response) {
        $("#taskList").append(`${response.task.title}`)
      }
    })
  });
});