Jquery提交事件未觸發

Question

我正在嘗試使用 jquery 提交表單。 我正在運行 Django 服務器。

JS代碼和HTML如下：

 document.addEventListener('DOMContentLoaded', function() { // Submit comment form document.querySelector('#comment-form').addEventListener("submit", function(event){event.preventDefault()}); document.querySelector('#comment-form').addEventListener('submit', () => save_comment()); }); function save_comment() { console.log('Save function triggered'); frm = document.querySelector('#comment-form'); data_submit = { updated_comment: frm.querySelector('#comment-editbox').value, month: frm.querySelector('#comment-mth').value, gl_code: frm.querySelector('#comment-gl').value, csrfmiddlewaretoken: jQuery("[name=csrfmiddlewaretoken]").val(), }; console.log('Save function triggered 2'); frm.submit(function (e) { console.log('Submit triggered'); e.preventDefault(); $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: data_submit, success: function (data) { console.log("successful"); }, error: function(data) { console.log("failed"); } }); console.log('save ended'); return false; }); }

 <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <label id="comment-heading">Comments <span id="comment-subheading"></span></label> <form action="{% url 'comment' %}" method="post" id='comment-form'> {% csrf_token %} <textarea id="comment-editbox" name="comment-editbox"></textarea><br> <input type="hidden" id="comment-mth" name="comment-mth" value=""> <input type="hidden" id="comment-gl" name="comment-gl" value=""> <input class="btn btn-primary" type="submit" value="Save" id='comment-save'> </form> </div> </div>

當我提交表單時，“觸發保存功能”和“觸發保存功能2”會登錄到控制台。 但“提交觸發”沒有。

表單確實被提交到服務器，該服務器返回一個 json 響應並導致表單導航到響應路由。 我不希望表單重定向到響應路由或重新加載頁面。

我究竟做錯了什么？

Answer 1

你為什么用？

frm.submit(function (e) {
   ...
});

您正在 DOM 上調用 submit 方法並將函數傳遞給它。 submit() 沒有函數； 應該刪除這兩行。

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('#comment-form').addEventListener('submit', save_comment);
});

function save_comment(e) {

  e.preventDefault();

  console.log('Save function triggered');
  const frm = document.querySelector('#comment-form');

  const data_submit = {
    updated_comment: frm.querySelector('#comment-editbox').value,
    month: frm.querySelector('#comment-mth').value,
    gl_code: frm.querySelector('#comment-gl').value,
    csrfmiddlewaretoken: jQuery("[name=csrfmiddlewaretoken]").val(),
  };

  $.ajax({
    type: frm.attr('method'),
    url: frm.attr('action'),
    data: data_submit,
    success: function(data) {
      console.log("successful");
    },
    error: function(data) {
      console.log("failed");
    }
  });
  console.log('save ended');
}