Question

I have a simple form with one input field. It works fine when I use the submit but hitting enter in the text field reloads the page with the form variable in the URL.

I looked through the many solutions available online (except for JQuery since it seems like overkill for something this simple) and haven’t been able to get ‘enter’ to work. Any help would be great

<form name="myform" action="" method="GET" > Enter text: <br>
  <input type="text" name="queryinput" onkeyup="if(isEnterPressed(event)){initialize(this.form.queryinput.value);}"><P>
  <input type="button" name="Search" value="Search" onClick="initialize(this.form.queryinput.value);">
  <input type="submit" value="Reset" onclick="reset();" />
</form>

function isEnterPressed(e){
  var keycode=null;
  if (e!=null){
    if (window.event!=undefined)    
      if (window.event.keyCode) keycode = window.event.keyCode; 
      else if (window.event.charCode) keycode = window.event.charCode;
    }else{
            keycode = e.keyCode;
    }
  }
return (keycode == 13);}

Edit 1: Version using onsubmit instead of the keycode listeners:

<form name="myform" action="" onsubmit="return initialize(this.form.queryinput.value)"  method="GET"> Enter text:<br>
<input type="text" name="queryinput">
<input type="submit" value="submit" >
<input type="button" value="Reset" onclick="clearAllPoints();"/>
</form>

Using onSubmit causes the click button to behave the same as hitting enter but neither version works.

Answer 1

Try using the onSubmit event for the form rather than the onClick event for the input element. It seems that onClick is firing only when it’s physically clicked by a mouse (which makes sense, I’ve just never encountered it like this I guess). The onSubmit event, however, should fire regardless of how the form is submitted.