For form, without submit button, with 1 text input, do submit on Enter.
For form, without submit button, with more than 1 text input, do not submit on Enter.
Should both not submit on Enter?
<!-- This one do submit on Enter -->
<form action="/">
<input type="text" name="firstname" value="Mickey">
</form>
<!-- This one do not submit on Enter -->
<form action="/">
<input type="text" name="firstname" value="Mickey">
<input type="text" name="lastname" value="Jerry">
</form>
If the form has no submit button, then the implicit submission
mechanism must do nothing if the form has more than one field that
blocks implicit submission, and must submit the form element from the
form element itself otherwise.
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission
You can see here how the forms works with no submit button:
https://www.tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/#no-submit-buttons
Generally, it is not okay to suppress the Enter key as a way to submit a form. That being put away, you can achieve this kind of functionality, using the jQuery library for JavaScript (it will be easier for you to use).
Here is a modified version of your HTML. I have added a data attribute to identify those forms, which would not submit on Enter key:
<!-- This one WILL NOT submit, when the Enter key is pressed -->
<form action="/" data-disable-enter="1">
<input type="text" name="firstname" value="Mickey">
</form>
<!-- This one WILL submit, when the Enter key is pressed
If you want to suppress the Enter key submission, add the data attribute data-disable-enter="1" -->
<form action="/">
<input type="text" name="firstname" value="Mickey">
<input type="text" name="lastname" value="Jerry">
</form>
And here is the JavaScript code, using the jQuery library to suppress the Enter key form submission. An event listener is attached to listen for the keydown event on each of the form elements (input, select and textarea) in all forms that have the data attribute data-disable-enter="1". If the pressed key code is 13 (which means "Enter"), then we would prevent the default action, associated with the key pressing, which in our case is the form submission.
jQuery("form[data-disable-enter='1']").find("input, select, textarea").on("keydown", function(e){
// 13 is the key code for the Enter key
if(e.keyCode === 13){
e.preventDefault();
}
});
Related
I want a simple form validation with the 'required' attribute. After clicking on submit button, I was unable to validate the form, and during the inspection, I noticed that form has added 'novalidate' attribute.
Here is my angular file.
<div>
<h2>New form validation</h2>
<form action="">
<input type="text" name="" id="" required />
<button>submitlhfg</button>
</form>
Note:- Without any value, the form shouldn't submit whenever my form is going submit.
I saw a strange behaviour while developing HTML form. This one I didn't notice previously. So I am curious.
Suppose following is form element.
<form>
<h2>Test</h2>
<input type="text" name="a">
<input type="text" name="a">
<input type="text" name="c">
<input type="submit" name='submit' value="Submit">
</form>
When input name='a' is focused and I press enter, the form is getting submitted by default.
I always thought form get's submitted when enter is pressed in last input element, i.e., in this case name='c'.
Now, how to make form get submitted only when enter is pressed on last input element?
I always thought form get's submitted when enter is pressed in last input element
No.
A form will be submitted when Enter is pressed on any input.
Now, how to make form get submitted only when enter is pressed on last input element?
This is not normal behaviour. It goes against user expectations. I recommend against doing this.
Bind a keypress event handler to each input except the last one
Check if the key is Enter
Call preventDefault() on the event object if it is
I have a simple form with one input field
<form ng-submit="UsernameModalInstance.submitUsername()">
<input type="text" required autofocus size="25" pattern="[^\s]+" title="no spaces allowed" placeholder="Enter Username Here...">
</form>
Note: this input field does not allow for no entry or any white spaces
Thus: my ng-submit function only fires when these requirements have been met
this is the functionality i want
However, there is another way to submit the form!
underneath this form i have a button:
<button class="btn btn-primary" title="You must enter a username to proceed" ng-click="UsernameModalInstance.submitUsername()" type="button">Submit Username</button>
The ng-click fires the same function as the ng-submit on the input
BUT I want this submit username button to have the same requirements as the form input.
currently, clicking the button will fire the function without meeting any of the requirements of having to enter something and no white spaces!
Is there a way to do this?
Here is a simple example. You can use it with ng-submit i.e replace onsubmit with ng-submit and no need of ng-click if you keep the submit button inside form element
function submitUsername(){
console.log("valid username");
event.preventDefault();//just to so it works here might not need in your code
}
<form onsubmit="submitUsername()">
<input type="text" required autofocus size="25" pattern="[^\s]+" title="no spaces allowed" placeholder="Enter Username Here...">
<button type="submit">Submit</button>
</form>
If there are multiple submit buttons on a form,which submit button is triggered when user hits enter key in a input type="text"
HTML Standard (inplicit submission):
A form element's default button is the first submit button in tree
order whose form owner is that form element.
https://html.spec.whatwg.org/multipage/forms.html#implicit-submission
Give it a try:
<form>
<input type='text'>
<input onclick="alert('FIRST')" type="submit" value="FIRST" />
<input onclick="alert('SECOND')" type="submit" value="SECOND" />
</form>
It should be first type="submit" input.
Fiddle: http://jsfiddle.net/ddan/5tmwjdad/
Right now I have a form with one input and one textarea, and I am trying to add an input, however when I do it causes the form to not submit, I am submitting by hitting the enter key and not using a button.
Current code:
<form method="POST">
Suggestion Subject: <input class="login-input" name="subject"><br>
Suggestion:
<textarea class="login-input" rows="8" name="suggestion"></textarea><br>
Username:
<input class="login-input" type="text" name="name"><br>
Hit the Enter key to submit your suggestion
</form>
When I add the Suggestion Subject input, it can no longer be submitted.
Any idea why?
The default behavior of a HTML form with a single input field is to submit the form on pressing enter on that field. Once you add more text inputs, pressing enter will no longer submit the form. To submit the form via enter, you'll need to add a submit button. If you don't want to see the button you can hide it.
Add type="text" to your subject field, like so:
<input class="login-input" type="text" name="subject">
and add a submit button like so (this will hide in all browsers):
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>