Jquery submit event not firing

Question

I am trying to submit a form using jquery. I am running a Django server.

The JS Code and HTML are as follows:

 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>

"Save function triggered" and "Save function triggered 2" get logged onto the console when I submit the form. But "Submit triggered" does not.

The form does get submitted to the server which returns a json response and causes the form to navigate to the response route. I do not want the form to redirect to the response route or reload the page.

What am I doing wrong?

Answer 1

Why are you using?

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

You are calling submit method on the DOM and passing in a function to it. There is no function with submit(); Those two lines should be removed.

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');
}