Trigger submit on pressing enter (as well if submit button is clicked)

user_13511127 0
Viewed 73

I know this has been asked before, and I have read the replies carefully, but still cannot get it to work in my code.

This is what I would like to achieve:

there is a text input field. The user types in the field. On clicking 'submit' button, the word 'done' appears on the screen. I can do this part without difficulty. However, I also want the user to able to submit by hitting 'enter' when they are in the input field, instead of having to hit 'submit' button (although I still want the submit button to work also - basically user has two options on how to submit, by clicking submit button, or hitting enter).

I followed instructions on W3, and have the following code:

var input = document.getElementById("myInput");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById("submit").click();
  }
});

function myFunction() {
document.getElementById("demo1").innerHTML =  "done";

}
<div class = 'method'>
  <form id="myFunction">
    <h3>myFunction():</h3>
    <input id="myInput" name="name">
    <button id="submit" type="button" onclick="myFunction()">Submit</button>
    <div id="demo1">function result on submit goes here</div>
  </form>
</div>

What am I missing?

Thanks in advance

form-submit dom html javascript
3 Answers

You can simplify your code to listen for the submit event, which will trigger when the form is submitted by hitting enter or by clicking the submit button:

var input = document.getElementById("myInput");
var form = document.getElementById( "myFunction" );

form.addEventListener( "submit", function( e ){

  e.preventDefault();
  document.getElementById( "demo1" ).innerHTML = "done";

});
<div class='method'>
  <form id="myFunction">
    <h3>myFunction():</h3>
    <input id="myInput" name="name">
    <button id="submit" type="submit">Submit</button>
    <div id="demo1">function result on submit goes here</div>
  </form>
</div>

user_121210520

By using a <button type="submit"> instead of type="button", you won't need the javascript to detect a keystroke. Both hitting the submit button and pressing enter will cause the onsubmit event to fire on the form. By calling event.preventDefault(), you make sure the browser does not navigate after submitting the form.

function myFunction(event) {
  event.preventDefault();
  document.getElementById("demo1").innerHTML = "done";
}
<div class='method'>
  <form id="myFunction" onsubmit="myFunction(event)">
    <h3>myFunction():</h3>
    <input id="myInput" name="name">
    <button type="submit">Submit</button>
    <div id="demo1">function result on submit goes here</div>
  </form>
</div>

user_1256610

You dont need to add event listeners to your button or your input.

Instead add the event listener to your form and prevent default event, because forms can be submitted by both 'enter' key as well as submit buttons (button needs to be of type 'submit').

document.getElementById('myFunction').addEventListener('submit', myFunction)

function myFunction(e) {
  e.preventDefault();
  document.getElementById("demo1").innerHTML = "done";
}
<div class='method'>
  <form id="myFunction">
    <h3>myFunction():</h3>
    <input id="myInput" name="name">
    <button id="submit" type="submit">Submit</button>
    <div id="demo1">function result on submit goes here</div>
  </form>
</div>

user_100140680
Related