Uncaught TypeError. Неопределенный объект не является функцией

Question

Я учусь JS, и я получаю эту ошибку:

Я не уверен, если это хорошая практика, но я смешивать простой JavaScript с JQuery. Я слышал, что это была плохая практика, но я также слышал, что использование простого JS происходит намного быстрее. Вот почему я переключаюсь туда и обратно. Я использую JQuery, чтобы использовать их полезная библиотека

HTML:

<form class="contact-input" id="contact-form" action="" method="post"> 
    {% csrf_token %} 
    <div class="col-md-12"> 
     <div class="col-md-6"> 
      <div class="contact-input-margin form-group"> 
       <input id="firstname" class="form-control" placeholder="First name"> 
      </div> 
      <div class="contact-input-margin form-group"> 
       <input id="lastname" class="form-control" placeholder="Last name"> 
      </div> 
      <div class="contact-input-margin form-group"> 
       <input id="email" class="form-control" placeholder="Email"> 
      </div> 
      <div class="contact-input-margin form-group"> 
       <input id="phonenumber" class="form-control" placeholder="Phone number"> 
      </div> 
     </div> 
     <div class="contact-input-margin col-md-6"> 
      <div class="form-group"> 
       <textarea id="message" rows="8" class="form-control contact-margin" placeholder="Message..."> 
       </textarea> 
      </div> 
     </div> 
    </div> 
    <input type="submit" value="Submit" class="btn btn-xl"> 
</form> 

ЯШ:

// Contact form submit 
var contactFrom = document.getElementById("contact-form"); 
contactFrom.on('submit', function(event) { 
    event.preventDefault(); 
    console.log("form submitted"); 
    create_post(); 
}); 

Answer 1

Вы используете метод JQuery на contactFrom, который не является объектом JQuery.

$(contactFrom) Использование:

var contactFrom = document.getElementById("contact-form"); 
$(contactFrom).on('submit', function(event) { 
    event.preventDefault(); 
    console.log("form submitted"); 
    create_post(); 
}); 

Example Here