Hitting enter does not invoke javascript function in HTML form

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.

Using enter in a form will submit the form, am I missing something? — The Muffin Man
– The Muffin Man, Commented Feb 25, 2011 at 0:15
i suppose is a typo, but you used <P> to close the first input :P — Bakaburg
– Bakaburg, Commented Feb 25, 2011 at 0:16
I don't get your on key up code: the if statement will be always true! — Bakaburg
– Bakaburg, Commented Feb 25, 2011 at 0:24
@Nick I'd like the form to call the function initialize instead of the default setup — Musannif Zahir
– Musannif Zahir, Commented Feb 25, 2011 at 0:49
@Bakaburg I actually closed it...the <P> was just for the cosmetics. The keyup code is from one of the solutions to a similar question - I'm not too sure on how it's intended to work. — Musannif Zahir
– Musannif Zahir, Commented Feb 25, 2011 at 0:50

David · Accepted Answer · 2011-02-25 00:17:57Z

6

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.

answered Feb 25, 2011 at 0:17

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jpsimons Over a year ago

I wanted to be the vote up to get you to 10,000 but you're still 12 points short.

David Over a year ago

@darkporter: I appreciate the sentiment, it is kind of exciting :)

jpsimons Over a year ago

It's just better accessibility to subscribe to form.submit instead of button.click. Mouse click, enter key, iPhone "Go" button, other ways to submit forms we haven't even thought of yet, if you listen to submit you'll be covered.

David Over a year ago

@darkporter: Definitely. Of course, it's also better to separate code from markup and subscribe to the events externally rather than directly in the HTML.

Musannif Zahir Over a year ago

I tried using onSubmit before as well but wasn't able to get it working. I'm using the form to get an address to load a google map on the same page without refreshing it. Is onSubmit meant to be used only in cases where a new page is loaded? Please find my update code in the question.

rayman86 · Accepted Answer · 2011-02-25 17:54:19Z

0

If you set your field outside of the form, it will not auto-submit the form when you press enter. Then you can have your button copy the text inside the input field to a hidden field inside the actual form and then submit it.

--edit, added code--

Enter text:<br>
<input type="text" id="myinputfield">
<form name="myform" id="myform" action="" method="GET">
  <input type="hidden" name="queryinput" id="queryinput">
  <input type="button" value="Submittal button" onclick="doSubmitForm();" />
</form>
<script type="text/javascript">
  function doSubmitForm(){
    itm1 = document.getElementById('myinputfield');
    itm2 = document.getElementById('queryinput');

    if (!itm1 || !itm2) return false;

    //You could put form input verification here

    itm2.value = itm1.value;
    document.forms["myform"].submit();
  }
</script>

edited Feb 25, 2011 at 17:54

answered Feb 25, 2011 at 0:19

rayman86

1,39510 silver badges9 bronze badges

2 Comments

Musannif Zahir Over a year ago

I'm not sure how I would modify the form to reflect this - Can you please point me to an example or provide a simple example?

Musannif Zahir Over a year ago

thanks for the example. I tried using it and it solves the issue of hitting enter causing the page to reload. Unfortunately, it still doesn't submit the form when I hit enter - I have to manually click the submit button every time.

Collectives™ on Stack Overflow

Hitting enter does not invoke javascript function in HTML form

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related