This bug/feature cropped up in one of my pages when viewed in google chrome so i wrote a test page which looks like this
<body>
<form action="loginhandler.php">
<input type="text" id="name">
<input type="text" id="lastname">
<input type="button" value="Login">
</form>
</body>
Here you can see, the input type is NOT of type submit. So if you press ENTER KEY on IE,Firefox,Opera, nothing happens and that is the expected behavior.
But if you press enter on chrome, it SUBMITS regardless of whether the input type is submit or not.
My question , is this a default feature/bug of chrome or am i doing something wrong here. ?
To cite section 4.10.21.2 of the HTML5 specification:
"If the form has no submit button,
then the implicit submission mechanism
must just submit the form element from
the form element itself."the form element itself."
Therefore I believe Chrome's behaviour to be correct, although I think other browsers do this as well. You can catch/block/process form submission by listening to the "submit" (e.g. to block it) event.BlockquoteBlockquotethe form element itself."
Not even Chrome, most of browsers submit once you press enter (even there is not submit button) when cursor in input.
I have the opposite problem. I use custom js-element for my form and when i use style='dispay:none;' for the submit button, chrome does not submit form on enter, although, firefox does :(
Related
I'm working on an HTML form for a web app. I'm adding the enterkeyhint attribute to indicate and navigate to the next input until the last one submits the form.
The problem is that enterkeyhint doesn't navigate to the next input if its type is type=text.
This happens on Chrome/83.0.4103.101 for Android 7. In Safari the hints button appears but they all do nothing.
Example:
<form (submit)="submitForm()">
<div>
<label>Name</label>
<input type="text" enterkeyhint="next" inputmode="text" />
</div>
<div>
<label>Email</label>
<input type="email" inputmode="email" enterkeyhint="next" />
</div>
<div>
<label>Comments</label>
<input type="text" />
</div>
</form>
Focusing on Name input, the Next button doesn't do anything.
Focusing on Email input, it navigates to any next input (Comments)
Now, if I change the type=email for type=text it doesn't navigate to the next input.
Similar behavior happens for type=tel. It does navigate to the next input of the form.
Am I missing something to make this work?
Thanks
enterkeyhint is just a hint to the browser what to display on the virtual keyboard, but you need to implement the actual behaviour yourself. See for example Focus Next Element In Tab Index, or How to focus next input field on keypress if your DOM is simple enough that the input fields are siblings with the default tab order.
From the spec:
The enterkeyhint content attribute is an enumerated attribute that specifies what action label (or icon) to present for the enter key on virtual keyboards. This allows authors to customize the presentation of the enter key in order to make it more helpful for users.
There is nothing in the spec to suggest that enterkeyhint actually affects the behaviour of the Enter key.
Can someone explain me why the submit event is never fired when pressing enter key in the input?
<form>
<input type="text" placeholder="press enter here"/>
<button disabled>disabled</button>
<button type="submit">submit</button>
</form>
Clicking on the submit button works well.
If I remove the disabled button it works well.
Tested under:
- Chrome Version 66.0.3359.181 (Build officiel) (64 bits)
- Chrome Version 68.0.3439.0 (Build officiel) canary (64 bits)
The first button is disabled but not the second which have type="submit".
Is that a known issue? Thanks,
This behavior is by design. The relevant part of the HTML5 standard is ยง4.10.21.2 "Implicit submission":
A form element's default button is the first submit button in tree order whose form owner is that form element.
If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text control is focused implicitly submits the form), then doing so for a form, whose default button has activation behavior and is not disabled, must cause the user agent to fire a click event at that default button.
The first submit button in the form is always treated as the default button, even if it is disabled. Disabling it prevents it from being used to submit the form.
Try setting the first button to type="button"
<form>
<input type="text" placeholder="press enter here" />
<button type="button" disabled>disabled</button>
<button type="submit">submit</button>
</form>
If you're not going to use the first button to submit the form, then it doesn't need to be declared as a submit button. If you don't declare it, the form likely thinks it should be the button that submits the form. (Because it's the first button the browser sees when the page form is parsed)
I have a form with <input type="submit">. In Chrome submit doesn't do anything. On a Network tab in developer tools I see nothing. No errors in developer tools either. Meanwhile, if I do save a page and open a saved page, then after I press submit button, I see something appears in Network tab. This happens in Chrome and Firefox. This works as expected in IE.
Does anybody have a hindsight, what should I look at?
I don't need a direct answer, I only need to know, where should I look at. If someone posts a direction and that'll help me to solve my problem, I'll accept it as a correct answer.
Structure of a page looks like this:
html
head
body
div
div
form
form
form
form
form
input
input
table
table
tbody
tr..td..input type=submit
If you are not using any JavaScript for form validation then a simple layout for your form would look like this:
<form action="formHandler.php" method="post">
<input name="fname" id="fname" type="text" value="example" />
<input type="submit" value="submit" />
</form>
You need to ensure you have the submit button within the form element and an appropriate action attribute on the form element is present.
For a more direct answer, provide the code you are working with.
You may find the following of use: http://www.w3.org/TR/html401/interact/forms.html
Are you using HTML5? If so, check whether you have any <input type="hidden"> in your form with the property required. Remove that required property. Internet Explorer won't take this property, so it works but Chrome will.
I faced this problem today, and the issue was I was preventing event default action in document onclick:
document.onclick = function(e) {
e.preventDefault();
}
Document onclick usually is used for event delegation but it's wrong to prevent default for every event, you must do it only for required elements:
document.onclick = function(e) {
if (e.target instanceof HTMLAnchorElement) e.preventDefault();
}
Hello from the future.
For clarity, I just wanted to add (as this was pretty high up in google) - we can now use
<button type="submit">Upload Stuff</button>
And to reset a form
<button type="reset" value="Reset">Reset</button>
Check out button types
We can also attach buttons to submit forms like this:
<button type="submit" form="myform" value="Submit">Submit</button>
Check if you are using any sort of jquery/javascript validation on the page and try disabling it and see what happens. You can use your browser's developer tools to see if any javascript file with validate or validation is being loaded. You can also look for hidden form elements (ie. style set to display:none; or something like that) and make sure there isn't a hidden validation error on those that's not being rendered.
I ran into this on a friend's HTML code and in his case, he was missing quotes.
For example:
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<input type="text" name="fname" id="fname" style="width:90;font-size:10>
<input type="submit" value="submit"/>
</form>
In this example, a missing quote on the input text fname will simply render the submit button un-usable and the form will not submit.
Of course, this is a bad example because I should be using CSS in the first place ;) but anyways, check all your single and double quotes to see that they are closing properly.
Also, if you have any tags like center, move them out of the form.
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<center> <-- bad
As strange it may seems, it can have an impact.
You can't have a form element as a child (directly or indirectly) of another form element.
If the following does not return null then you need to remove the excess form elements:
document.querySelectorAll('form form');//Must return null to be valid.
check your form is outside the table
I have a <form> element surrounding several inputs:
<form>
<div class="tr" id="widget306">
<div class="td col-grab">
<button type="button" class="button grab formwidget" id="widget611">m</button>
</div>
<div class="td col-name">
<input type="text" name="name" value="target volume profile 1" id="widget607" class="formwidget textbox">
</div>
<!-- ... etc ... -->
</div>
</form>
I would like to trigger a submit event on the form when the user presses enter while focused on an element (standard behavior for input elements wrapped in a <form> tag), but when I press enter, nothing happens (fiddle). If I remove all but one input element, the code works, and I get the expected behavior of pressing enter and triggering a form submit (fiddle).
How do I get the desired behavior (pressing enter submits the form) in the first example where I have multiple forms?
Note: I have found this same behavior in Safari 5.1, Chrome 17, Firefox 9, and IE 9.
Clarification: I know I can just throw some Javascript at it, but I'd like solve it with just markup.
Update: as some of you have helpfully pointed out, I can get the desired behavior by adding an <input type=submit>. The problem is I don't want the user to see the submit button. I can't just set its display to none, because then browsers won't submit when return is pressed, so I borrowed from QUnit and set the following:
HTML:
<input type=submit class=hide-me />
CSS:
.hide-me {
position: absolute;
left: -10000px;
top: -10000px;
}
I have noticed that forms don't like to submit without a submit button. The problem is simply resolved by adding a submit button. See this fiddle for a demonstration. Furthermore, browsers submit when a user presses enter by default, so fix that and you won't need a javascript trigger to cause it.
EDIT:
If you don't want to use a <input type="submit"> simply because it's styling deficiencies, consider a <button type="submit">, it should also do the trick. If you just don't want a submit button at all, stick with the CSS hack.
After trying it myself I couldn't believe it either.
Looks like this is the issue:
Why does forms with single input field submit upon pressing enter key in input
It's default behaviour for browsers to automatically submit simple forms (like search ones) which is why it's working when there is only one input. I believe if you want this functionality on complex forms you will need to use javascript. If you're not against using jQuery the following should do the trick.
$(function(){
$("#formid input").keypress(function(event){
if (event.which = 13){
$("#formid").submit();
}
}
}
Add an element
<input type="submit" name="xx" value="submit" />
it will trigger submit behavior automatically.
you can also use jQuery to handle press event.
Sean.
Try this one. i use this on my textarea with tinymce for a chat system
<script>
function getKeystroke(e)
{
var keynum;
keynum = (window.event) ? event.keyCode : e.keyCode;
switch(keynum)
{
case 13: /* enter key */
document.getElementById("s_say").click();
document.getElementById("s_message").focus();
break;
}
}
</script>
s_say is the ID of the input type submit btn.
I have a form with some
<button>
elements and a normal
<input type="submit">
button to submit the form.
However, when I press Enter when I'm in a textfield, the form does not get submitted but much rather the first Element is "pressed".
How can I change this behavior?
I would recommend changing the <button> tag and turning it into an <input type="button" /> tag. This should force the form to submit the way you want.
You can use javascript to capture that the Enter key was pressed and submit the form.
See this example.
For a complete answer, could you please post your HTML?