Search code examples
htmlformsform-submitenter

What content outside a form might break implicit form submission (Enter key)?


I have added this simple search form to the menu area of a database webapp:

<form action='list.php'>
  <input name='textinput1' placeholder='"._('(quick search)')."' style='width:7em'>
  <input type='hidden' name='texttarget1' value='Name'>
</form>

It works on most pages, but on two pages, hitting Enter does nothing. You can try it out at https://missiondemo.kizunadb.com (an empty demo instance) - log in with "demo"/"demo". The two pages on which the menu-bar search form won't submit are "New Person/Org" (a big edit form) and "DB Settings" (a bunch of little forms and bits of AJAX).

The search form is exactly the same on all pages, so apparently something else on those pages is affecting the behavior of the search form, as unlikely as that seems to me. Any ideas of what could do that, and what to do about it?


Solution

  • It is these lines:

    function stopRKey(evt) {
      var evt = (evt) ? evt : ((event) ? event : null);
      var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
      if ((evt.keyCode == 13) && (node.type=="text"))  {return false;}
    }
    document.onkeypress = stopRKey;
    

    You are listening to all key presses and returning false if the keyCode is 13 (Enter) which prevents the default behaviour, in this case submitting the form

    And the important part, how I found the problem:

    • Went to a page that was working, and opened the Chrome DevTools
    • On the Elements tab, selected the input element
    • Looked on the 'Event Listeners' tab, saw that there was nothing related to keyboard events
    • Went to one of the broken pages and repeated the process
    • This time on the 'Event Listeners' tab saw that there are a lot more event listeners, including one for keypress
    • Expand the keypress listener and you will see that the listener has been attached to document and it tells you the file and line number of the code associated with the listener.