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;"/>
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>
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();
}
});
Following is a sample code of which I’m working of. When navigating through ENTER button form submit invokes “Cancel” action though it’s tab index is after the “Next” button.
E.g.
Field01 <ENTER> Field02 <ENTER> Field03 <ENTER> >>>>> Form submits with Cancel action
Field01 <TAB> Field02 <TAB> Field03 <TAB> >>>>> Next button is focused
Changing the order of “submit” buttons in HTML mark-up would help to prevent the invocation of “Cancel” button by default. But I need to keep “Cancel” button in left side & “Next” button in right side.
<form method="post" action="/SVRWeb/ActionController" name="frmMain">
<div>
<h1>Some information</h1>
<label>Field 01</label>
<input type="text" tabindex="0" name="field01" value"" size="15" />
<label>Field 02</label>
<input type="text" tabindex="1" name="field02" value"" size="15" />
<label>Field 03</label>
<input type="text" tabindex="2" name="field03" value"" size="15" />
</div>
<input type="submit" tabindex="4" name="Action.User.Init" value="Cancel" />
<input type="submit" tabindex="3" name="Action.User.Form2" value="Next"/>
</form>
The enter key fires the firstnext type="submit" element in the form, regardless of the tabindex. There are two ways to go around this:
Use JS to click the particular button when enter key is pressed:
<form onkeypress="if (event.keyCode == 13) document.getElementById('next').click();">
This however get nasty when you've a <textarea> in the form for which you of course want to keep its default behaviour with enter key.
Put buttons in same container element with the Next button first and use CSS to swap them.
.next { float: right; }
.cancel { float: left; }
I think it is because it see's the Cancel and Next button as the same thing. They are both of type Submit. So when you press enter it finds the first submit button. I would change the cancel type to maybe reset? Then use javascript/jQuery to do a redirect when you click the cancel button.
There may be a better way.