Menu
I have just found out that a FORM containing only one INPUT (not hidden) will automatically submit when pressing Enter.
But a form containing at least two INPUTS (not hidden) will NOT submit when pressing enter.
(None of the scripts have a submit/button/input[type=submit] inside)
Take a look at this jsfidle. Is there an explanation/standard for this behavior?
<form id="form1" method="POST"> <p>Does submit:</p> <input type="text" placeholder="focus and press enter"/> </form> <form id="form2" method="POST"> <p>Does <strong>not</strong> submit:</p> <input type="text" placeholder="does not submit"/> <input type="text" placeholder=""/> </form> 
421
To prevent form submission when the Enter key is pressed in React, use the preventDefault() method on the event object, e.g. event. preventDefault() . The preventDefault method prevents the browser from refreshing the page when the form is submitted.
yes, multiple submit buttons can include in the html form. One simple example is given below.
Input value attribute The value attribute can be used to change the text of the form submit button. Use value attribute within <input> of type="submit" to rename the button.
getElementById("testForm"); form. addEventListener("submit",function(e){e. preventDefault(); return false;}); This solution will now prevent the user from submit using the enter Key and will not reload the page, or take you to the top of the page, if your form is somewhere below.
This behaviour was introduced in the HTML 2.0 specification. See the following article for more details:
Form submission and the ENTER key?
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form
Source: W3C Specs
120
That's a browser specific implementation . . . some versions of IE actually does not do that by default, but Firefox and some of the other browsers saw fit to make the assumption that, for a form with one text box, the user (or page designer) will always want the form to submit on Enter from that field.
There have actually been multiple times that I have had to code around that . . . it's one of the more questionable browser design decisions in my opinion.
Edit:
There are more nuanced answers to your question, if you are interested . . . apparently different browsers (and their different versions) have different behaviors around this specific situation, including whether or not they submit at all, whether or not the click event occurs, etc. I can provide links to more information if you would like to read more.
But the short answer is that, it actually is intentional, if not consistently supported across browsers.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
