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
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)...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.