bootstrap studio: enter key appears to causing reload of page

Question

I have a web page with several forms. Only one is visible at a time, depending on state.

On one form, pressing the enter key appears to be causing a reload of the page rather than triggering a click event for the form's button.

I have a lot of javascript, primarily because I need client side interaction with mailchimp. Because of that, I have disabled the form's action= html and have instead created a javascript function to handle the click. It works fine if you click on the button.

I have also assigned a listener for the sole field in the form:

var input = document.getElementById ("new-email-address");
input.addEventListener ("keyup", function(event)
{
  if (event.keyCode === 13)
  {
    event.preventDefault();
    document.getElementById("new-email-address").click();
  }
});

Yet, when I click the enter key, the $(document).ready (function() executes. It's possible something else is executing beforehand, but, if so, I haven't found a way to discover that.

What could be causing this behavior ?

Answer 1

It turns out that the enter key is being handled at the form level. To disable that, I added this code for each form:

$("#the-form").keypress(function(e)
{
  if (e.which == 13) // Enter key
    return false;
});