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
Related
There is an input tag which gets some text and a button to submit the information. I want to make sure the user clicks button. This is not related to validating the input. Just want to make sure that if the user is viewing this page and has entered text then he must click the button before moving onto the next page.
<input type="text" class="form-control ng-pristine ng-valid ng-touched" placeholder="Search for a domain" name="page1.domainSearch" [(ngModel)]="searchValue" (ngModelChange)="func()" />
<button type="submit" class="search" (click)="func()" [disabled]="!searchValue"></button>
I know i can add a boolean variable to this component and then pass the value of this variable to the component having the button to progress to next page as an input. But is there any way to make sure of this in the same component?
I have a form with some text input fields (let's say FirstName and LastName to keep it simple) and then a submit input field at the bottom of the form (with a value of Sign In)
When I type something in one of the text fields (such as typing John for the FirstName) and then press Enter on the keyboard, it automatically triggers the submit input field, as if I have actually clicked the Sign In button.
I understand the reason why it is doing this, however I need to find a work around so that if Enter is pressed, I can carry on typing in the rest of my form. I don't want the form to actually be submitted until someone clicks Sign In.
I have read a suggestion such as changing <input type="submit" value="Sign In">to <input type="button" value="Sign In"> instead, however if I do this it then makes the button un-clickable, and doesn't actually 'submit' the form.
Any suggestions?
I haven't included my code because I didn't feel it was necessary, as I'm sure there's a really simple solution I'm completely missing.. but if I really need to paste my code I can.. thanks.
Inline HTML:
<form onkeypress="return event.keyCode != 13;" ...>
...
</form>
That works by disabling the enter key for the entire form. (take note that this will stop you from making newlines in textareas)
Source
You can not for the input "text" but you can for input "area" because area input is not fixed.
I'm running into a strange issue where Internet Explorer is adding an additional query string parameter that no other browser adds.
The page has a form with auto-submit functionality and a "Reset Filters" button. When a user hits the enter key, it forces the submit. When a user hits enter in Internet Explorer, for some reason the "Reset Filters" operation is selected rather than the submit button.
For example, IE adds this to the query string:
?search=this+is+text&op=Reset+Filters
In all other browsers the same query looks like this:
?search=this+is+text
When I check the $_GET superglobal in PHP, I noticed that op is only being added when I run the application in IE and only when I hit the enter key in the form.
Based on the HTML below, it kind of makes sense that hitting enter would add op to the query string because both the submit button and the reset button are contained within the form. But why would op only get added to IE?
<form>
...
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
<div class="reset-button">
<input type="submit" id="edit-reset" name="op" value="Reset Filters" class="form-submit">
</div>
...
</form>
Any idea why this might be happening?
UPDATE: One other piece of information that might be important. Because the form is auto-submit, the first submit button is actually hidden. I'm wondering if that's why IE is using the second button as the submit handler.
After doing some more research I realized I asked the wrong question. However, it's not letting me delete the question, so I'm posting the answer to my actual question here.
My question should have been, "When multiple inputs exist in a single form, how does the browser determine which one is chosen when hitting the enter key?"
The answer is, when the enter key is hit, the first input of type="submit" is chosen. However, IE will skip any submit buttons that are hidden with display:none.
I found the answer here:
Multiple submit buttons on HTML form – designate one button as default
My fix was to set the submit button to position: absolute; left: -1000% rather than display:none. I got that solution from #bobince on the linked answer, however, left:-100% did not push it completely off the page for me so I changed it to left:-1000%.
IMHO it seems wrong to be using a submit button do convey some information other than "hey, I've submitted some data". If the user hits enter to submit the form it is reasonable that some browsers would send all the data associated with all the submit buttons.
If you are just resetting the inputs from previous parts of the form you could use:
<button type="reset">
If you do need other input data maybe a checkbox would be more appropriate:
<form>
...
<input type="checkbox" id="edit-reset" name="op" value="Reset Filters">
<label for="edit-reset">Reset Filters</label>
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
...
</form>
If you do not need other input data you could use two forms:
<form>
...
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
</form>
<form>
<div class="reset-button">
<input type="submit" id="edit-reset" name="op" value="Reset Filters" class="form-submit">
</div>
</form>
A submit button is an input. It has a name and a value. When you click on one of the submit buttons, it's value gets added to the the submission with it's name. When you hit the enter key, the form is automatically submitted, but since you are using two submit buttons, they are both contributing a parameter. You have a lot of options that others have already suggested. You could change the type to "reset" or "button", but if you need to post to the server for both actions, then you could intercept the keystroke with javascript and click the button in code. I would probably go with a button type that would submit the form like this.
<input type="button" id="edit-reset" name="op" value="Reset Filters"
class="form-submit" onclick="submitform()">
<Script>
function submitform()
{
document.getElementById("your-form-name-here").submit();
}
</script>
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();
}
});
When I have a submit button, it sends the form when I press enter.
Is the submit button necessary?
I am thinking of removing the button if it is unnecessary.
You need the submit button, otherwise the input is just an input.
Of course, you could use some javascript to force the submission, either onblur (when the input loses focus) or when the enter key is pressed.
However, I think this is a very bad idea from a user experience point of view. People expect a submit button.
Here is another SO answer with some suggestions:
Submitting a form by pressing enter without a submit button
In a <form>, one can submit by pressing the Enter key when you have a text input but hide your submit button.
<form action="wherever">
<input type="text" name="input" />
<input type="submit" value="Submit" name="submit" style="display: none;" />
</form>
This type of buttonless interface may be useful in interfaces like a command prompt, but generally, users often recognize a form with a submit button.