Почему Django modelform отправляется с ключом enter

Я использую Django modelform, и он отправляется нажатием клавиши Enter. Это то, что я хотел, но я не знаю, почему это работает. Я не добавлял никаких JS-кодов, связанных с keydown, но добавил другие коды для отработки Ajax. Также я обнаружил, что когда в форме только один вход, он отправляется с помощью клавиши Enter, но в моей форме два входа.

Что я делаю, так это добавляю комментарий к посту типа instagram. Я использовал Ajax для создания экземпляра комментария.

• models.py

class Comment(models.Model):
    parent_post = models.ForeignKey(Post, on_delete=models.CASCADE, related_name="comments")
    author = models.CharField(max_length=10)
    content = models.CharField(max_length=100)

• forms.py

class CommentForm(ModelForm):
    class Meta:
        model = Comment
        exclude = ["parent_post"]

• HTML

{% for post in posts %}
 <form method="POST" data-id="{{post.id}}" class="d-flex align-items-center w-100 mt-2">
            {% load widget_tweaks %} <!-- this is a django package for easy CSS -->
            {% csrf_token %}
            {{ form.non_field_errors }}
    <div class="fieldWrapper">
        {{ form.author.errors }}
        {{ form.author|add_class:"form__author"|attr:"placeholder:name" }}
    </div>
    <div class="fieldWrapper w-100">
        {{ form.content.errors }}
        {{ form.content|add_class:"form__content"|attr:"placeholder:content" }}
    </div>
    <button class="btn btn-sm btn-warning w-auto">Write</button>
    </form>
{% endfor %}

• JS (Здесь я не стал ставить коды после получения JSON ответа от views.py)

const forms = document.querySelectorAll("form");
forms.forEach((value) => {
  const post_id = Number(value.getAttribute("data-id"));

  value.addEventListener("submit", (e) => {
    e.preventDefault(); // prevents reload, still submits form data but views.py does nothing for this data
    writeComment(post_id);
  });

const requestWrite = new XMLHttpRequest();
const writeComment = (post_id) => {
  const form = document.querySelector(`form[data-id="${post_id}"]`);
  const author = form.querySelector(".form__author");
  const content = form.querySelector(".form__content");

  const url = "/write/";
  if (author.value && content.value) {
    requestWrite.open("POST", url, true);
    requestWrite.setRequestHeader(
      "Content-Type",
      "application/x-www-form-urlencoded"
    );
    requestWrite.send(
      JSON.stringify({
        post_id: post_id,
        author: author.value,
        content: content.value,
      })
    );
    author.value = null;
    content.value = null;
  }
};

• views.py

@csrf_exempt
def write(request):
    req = json.loads(request.body)
    post_id = req["post_id"]
    author = req["author"]
    content = req["content"]
    comment = Comment.objects.create(parent_post=get_object_or_404(Post, id=post_id), author=author, content=content)

    return JsonResponse({"post_id":post_id, "comment_id":getattr(comment, "id"), "author":author, "content":content})

Спасибо!

Вернуться на верх