How to Submit a Form When the Return Key Is Pressed

How to submit a form when the return key is pressed?

IMO, this is the cleanest answer:

<form action="" method="get">  Name: <input type="text" name="name"/><br/>  Pwd: <input type="password" name="password"/><br/>  <div class="yourCustomDiv"/>  <input type="submit" style="display:none"/></form>

How to submit form with enter key when I have a button, not a submit

Attach keydown event with the document and call your function if Enter is pressed

$(document).on("keydown",function(e){

var keyCode = e.which || e.keyCode;
if(keyCode == 13) // enter key code
{
submitChat();
}

});

How to submit a form using Enter key in react.js?

Change <button type="button" to <button type="submit". Remove the onClick. Instead do <form className="commentForm" onSubmit={this.onFormSubmit}>. This should catch clicking the button and pressing the return key.

const onFormSubmit = e => {
e.preventDefault();
// send state to server with e.g. `window.fetch`
}

...

<form onSubmit={onFormSubmit}>
...
<button type="submit">Submit</button>
</form>

Submit a form only when 'enter' key is pressed

It might be helpful to trigger the function inside the tag from the parent. Like this

<form id="myform" onsubmit="event.preventDefault()">
<input type='text' id='input' onkeyup="keypressHandler(event)" />
</form>
<script>
function keypressHandler(e) {
if(e.keyCode == 13)
myform.submit();
}
</script>

Submitting a form by pressing enter without a submit button

Update 2022: Use this instead

<input type="submit" hidden />














Notice - Outdated answer
Please do not use position: absolute in the year 2021+. It's recommended to use the hidden attribute instead. Otherwise, look down below and pick a better, more modern, answer.

Submit form with Enter key without submit button?

$("input").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
$("form").submit();
}
});

Avoid only form submission on Enter key press

Replace your button with this button

<button type="button" onclick="formSubmit()">Submit</button>

then handler submit event with javascript like below.

function formSubmit() { 
//here your code
}

HTML5: How to make a form submit, after pressing ENTER at any of the text inputs?

Try adding this between the <form></form> tags

<input type="submit" style="display: none" />

Tested it and it works on Firefox and Chrome. If you have a submit input type in the form, enter should automatically submit it, regardless of whether it's visible or not.


I am actually using this myself in a login form, though in the username field, it makes more sense to move to the next field than to submit. Just in case you have a similar use case, here's the code I used (requires jQuery)

$('#username').keypress(function(event) {
if (event.keyCode == 13 || event.which == 13) {
$('#password').focus();
event.preventDefault();
}
});

Note that there is a slight bug though -- if the user selects a browser autocomplete username and presses enter, it still moves to the next field instead of selecting it. Didn't have time to debug this, but if someone can figure out how to fix it, that would be cool.

Form not submitting when enter key is pressed

Change your button type to 'submit' in the button tag.



Related Topics



Leave a reply



Submit