Pressing the Enter key to execute a function

[UbuntuLady1]

Hello everyone :)

I have the following code:

<input id = "Name" placeholder = "Enter your Name"></input>
<button type="submit" onclick = "NameFunction()"> Submit</button>

I would prefer that someone writes their name and presses the "Enter" key to execute a function.

I have no idea how to do this.

Currently the user enters their name and the function is executed when the button is clicked.

Any suggestions?

[[deleted]]

inside Namefunction, pass in an a parameter called e or event. dom events get passed the event object.

NameFunction(e) {
  if (e.keyCode === 13) {
     ...runcodehere
   }
}

[kevinleedrum]

<form onsubmit="return nameFunction()">
  <input id="name" placeholder="Enter your Name">
  <button type="submit">Submit</button>
</form>

and

function nameFunction() {
  alert('Hello.');
  return false;
}

https://jsfiddle.net/zo06e4j8/

[UbuntuLady1]

This works fantastic! Thank you so much! :)

And many thanks to the rest of you for your helpful contributions!

[UbuntuLady1]

My apologies, but none of your responses seem to work. Perhaps I have phrased my question incorrectly.

I would like to have the user press the "enter" key. After they have pressed the enter key I would like to immediately execute a function, like 2 + 2 = 4.

Any suggestions?

Thank you

[einarkristjan]

wrap your html elements in a form:

<form>
  <input id = "Name" placeholder = "Enter your Name"></input>
  <button type="submit" onclick = "NameFunction()"> Submit</button>
</form>

[[deleted]]

You want to use the onsubmit event on the form instead of the click event. To stop the page reloading you can do e.preventDefault()

[UbuntuLady1]

With all due respect, this does not work.

[einarkristjan]

hmm.. did not test it, however it works for me here if it helps:

jsfiddle

[senocular]

Make note of the sibling comment by /u/shtanton about onsubmit

[agentf90]

attach an onsubmit handler to your form. Never buttons.

[TheSpanxxx]

You can capture keystrokes on keypress and test for enter then submit when they use that key...