e.preventDefault() not working on form submission

Question

When my HTML form is submitted, the webpage reloads even though I have the e.preventDefault() command in my submission function.

 $("#room-code-form").addEventListener("submit", function(e) { e.preventDefault(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="room-code-form"> <input type="text" /> <input type="submit" /> </form> 

Answer 1

Try using submit function. You need to bind it inside Document Ready function

 $(document).ready(function() { $("#room-code-form").submit(function(e) { e.preventDefault(); }); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="room-code-form"> <input type="text" /> <input type="submit" /> </form> 

or

$("#room-code-form").submit(function(e) {
   return false;
});

Answer 2

1. You have to use on() or bind() with jquery instead of addeventlistener.
2. Also return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation on the passed jQuery.Event object.

 $("#room-code-form").on("submit", function(e) { e.preventDefault(); }); 

 <form id="room-code-form"> <input type="text" /> <input type="submit" /> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>