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
Angular2:Render a Component Without Its Wrapping Tag
Write/Add Data in JSON File Using Node.Js
Cryptic "Script Error." Reported in JavaScript in Chrome and Firefox
Ternary Operators in JavaScript Without an "Else"
How to Open a Url in a New Tab Using JavaScript or Jquery
How to Convert Raw JavaScript Object to a Dictionary
Http Status Code 401 Even Though I'm Sending Credentials in the Request
How to Sequentially Run Promises with Q in JavaScript
Access JavaScript Nested Objects Safely
How to Implement a Stack and a Queue in JavaScript
Syntax for an Async Arrow Function
Obtain Form Input Fields Using Jquery
Jquery Pass More Parameters into Callback
How to Access Iframe Parent Page Using Jquery
Angular 2: How to Detect Changes in an Array? (@Input Property)