Why submit event doesn't work when <form> has two <input> elements instead of one?

help
1

When I type something in "<input>" field and press enter submit event is not triggered.
When I remove one of the "<input>" elements submit event is triggered.
So why submit event doesn’t work with two "<input>" elements?

App.html

<body>
  
  <form>
    Task:     <input type="text" name="desc"  />
    Task:     <input type="text" name="desc2" />
  </form>

</body>

App.js

//CLIENT.
if (Meteor.isClient) {
  
  //BODY EVENTS.
  Template.body.events({ 
    
    //TASK ENTERED.
    "submit form": function (event) {
      console.log("Submit tasks");
      event.preventDefault();      
    }
  
  }); 
    
}
2

It seems to be a browser behavior from the Netscape times and unlikely to change.

If you want to prevent the form from submitting you could add another input and hide it with css. There’s other fancy solutions in that SO thread too.

3

Whou, what a mess.
And nobody took time to fix this.
As a workaround I later added <input type="submit"/> and I noticed that it worked as suggested in the link you provided.
So one way of solving this is to add invisible submit button as shown below.
Then pressing enter while editing multiple fields would trigger submit event.

  <form class="authenticate">
    Username: <input type="text" name="username"/> <br>
    Password: <input type="text" name="password"/> <br>
              <input type="submit" style="display: none;"/>
  </form>
1 Like