Google App Script - Enter key in input textbox - how to catch or disable?

Question

I have an html page published as a web app through Google app scripts. On the page is an input box (textbox) the user types a number to search for. If they click the 'search' button beside the box, it works fine. If they type the number and then press 'enter' on the keyboard, it throws a 400 error ('The requested URL was not found on this server. ').

input area code:

<input type="text" id="claimSearchBox" class="form-control"  placeholder="Search" />
<input type="button" id="btnsearchClaims" class="btn-md btn-success" onclick="getOrders" value="Search for a Claim"  />

javascript: (this works for the button)

document.getElementById("btnsearchClaims").addEventListener("click", getOrders);

(this does not work for the input box)

document.getElementById("claimSearchBox").addEventListener("keyup", function(event) {
event.preventDefault();
console.log('event:  ' + event.keyCode);
if (event.keyCode == 13) {
  console.log('correct key');
  getOrders();
}
});

I also tried this, which shows what keys are pressed, but as soon as I press enter, it goes to the 400 error.

$(document).ready(function(){
  $("claimSearchBox").keyup(function(e){
  console.log(e.keycode);
    console.log("worked");

  });
});

Any suggestions? Is there a way to disable the 'enter' if I can't redirect it to the getOrders()?

**Edited to add...if I don't have any programming for the input box and the user presses enter - it goes to the error (page is blank - error is shown in console).

***Found the problem: Turns out it was an issue of this input box being the only input box on the form. When the user hits enter, it automatically submits the form! I found the issue/solution here: Why does forms with single input field submit upon pressing enter key in input

Answer 1

This may help you get further with your code.

I see that you are invoking jQuery.

$(document).ready(function(){

Can you confirm that the page you are displaying is properly loading jQuery?

Your html should have something like this present.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

If you use your debugger and successfully enter your readythen you have jQuery loaded.

With jQuery, you could simplify your event handling.

Replace

document.getElementById("btnsearchClaims").addEventListener("click", getOrders);

With

$("#btnsearchClaims").on("click", getOrders);

Replace

document.getElementById("claimSearchBox").addEventListener("keyup", 
function(event) {

With

$("#claimSearchBox").on("keyup", function(event)...