https://jsfiddle.net/516amfmL/2/ -- click into the form input, press ENTER
<form onsubmit="return false;">
<button style="display: none !important;" onclick="alert('!! Should NOT see this !!');">Hidden Button</button>
Click in input, press ENTER: <input type="text" />
<p>
<button onclick="alert('this is okay');">Visible button</button>
</p>
</form>
When running the above JS Fiddle, Chrome & Firefox work the same, MS Edge & Safari do things differently. I listed this as a bug in Chrome, and was quickly told that they were following the HTML standard which states:
4.10.22.2 Implicit submission -- A form element's default button is the first submit button in tree order whose form owner is that form element.
No one thought to make it clear in the standard if it should ignore hidden elements.
Anyways, that's not my question. My question is what's the best way to work around this issue?
A hidden button on a form is still active and has always been this way, but it's natural to think it would or should be automatically disregarded.
One possible fix to your problem is to change the first button to an <input type="button"/>
<input type="button" style="display: none !important;" value="Hidden Button" onclick="alert('!! Should NOT see this !!');"/>
This works on Chrome and Edge.
Here's your fiddle updated.
Related
I did a seemingly correct layout of form, but submit does not happen whet I hit enter after entering password. I need to click the button to do submit. I base my approach on http://docs.angularjs.org/api/ng/directive/ngSubmit with only exception that I use button, not input.
<form name="loginForm" id="loginForm" ng-submit="login(credentials)" novalidate="novalidate">
<input type="password" placeholder="password" id="password" name="password" ng-model="credentials.password" ng-maxlength="40" required="required" form-control="form-control" class="form-control ng-valid-maxlength ng-dirty ng-valid ng-valid-required">
<button type="submit" id="loginButton" ng-disabled="!loginForm.$valid" class="btn btn-primary btn-lg">Login</button>
</form>
UPDATE The behaviour works in firefox but not in chrome.
ng-submit does not accept JavaScript, it accepts an angular expression.
As such, your code there won't work.
IF login is a function on the scope accessible by this markup, then the following will work:
<form name="loginForm" ng-submit="login(credentials)" novalidate>
If this isn't working, then check your developer console - are there any errors? It's very likely your function isn't on the scope that you think it's on. Provide your javascript in the question for a more accurate answer.
Comment and I will update if you still need help.
I had the same problem. check the element that contains your form. my form overflowed outside of it's containing DOM element and submit button was accidentally in the overflowed section (the height of the containing div was less than the height of the form). As I positioned it inside, it worked.
I still don't know what causes this problem in Chrome. maybe it is angular's behavior in Chrome.
EDIT :
you can also try fixing it by removing any given height from form's parent element.
I've been using HTML5's button form attribute to have my submit button show up outside of the form and still trigger my submit.
My form looks something like this:
<article>
<header>This is my form</header>
<section>
<p>Something explaining what is happening on this form.</p>
<form id="myform" action="/submit" name="myform">
<input type="text" name="thing">
</form>
</section>
<footer>
<button type="submit" form="myform">Submit</button>
</footer>
</article>
I have this working fine in Chrome/Firefox/Safari, but I went to test it in IE10 today and the form doesn't submit!
Besides redesigning all of my pages to not use the form= attribute, does anyone know how to get around this? I want it to work like a normal submit button inside a form, where hitting enter in the text field will submit the form as well as clicking the button.
I'd like to avoid adding click events and listening for enter on text fields to trigger the submit in JavaScript if possible.
It seems the attribute form="myForm" is not supported on IE.
View the table here for more info:
http://caniuse.com/#search=Form%20features
The only way to replicate this will be to use/create a javascript polyfill to replicate the desired behaviour.
You can find a list of cross-browser polyfills here:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
I couldn't find one to fill the form behaviour (but only looked for a min, so check yourself).
I think you will have to write your own custom polyfill for this.
A simple inline onclick would look like this:
<button
type="submit"
form="myform"
onclick="javascript:getElementById(this.getAttribute('form')).submit();"
>Submit</button>
JSFiddle: http://jsfiddle.net/mf63k/4/
I found nothing in the HTML Spec about how a browser (Google Chrome, FF, IE & Opera all in latest version) has to behave if there is an onclick handler on an input with a wrong type, so i'm asking you, experts :)
I used the following html and imagined the browser gave me some kind of error (maybe just in the developer console log), but it just reloads the whole page!
<!DOCTYPE html>
<html>
<body>
<form class="form-inline">
<button type="button color" onclick="document.getElementById('magic').innerHTML='clicked broken button'">Broken Button</button>
<button type="button" onclick="document.getElementById('magic').innerHTML='clicked button'" >Button</button>
</form>
<p id="magic"></p>
</body>
</html>
As you can see, the first button has a wrong type, whereas the second button has a correct type. Both buttons have nearly the same onclick-handler, the only difference is the text of the paragraph, that is changed.
When you click on the first button, the paragraph's text is changed and the whole page reloads, which results in an empty paragraph. When you click on the second button, everything acts as expected and the paragraph's text is just changed - without a reload.
So, can you tell me why reloading the whole page is the default behavior in all 4 major browsers. Shouldn't a browser make a hint about a miss-typed button (maybe by printing an error message in the developer console log). For me this is very confusing :(
Your buttons are reloading the page because they're inside a <form>, so it's acting as if the form is being submitted.
Add return false; at the end the first onclick.
<form class="form-inline">
<button type="button color" onclick="document.getElementById('magic').innerHTML='clicked broken button'; return false;">Broken Button</button>
<button type="button" onclick="document.getElementById('magic').innerHTML='clicked button';" >Button</button>
</form>
That should do the trick!
The default value for the type attribute of a button element is submit. This means that when such an element is clicked on, the onclick event handler is first executed and then (unless the handler suppresses this) the form is submitted. In practice, browsers default the action attribute of a form element to the URL of the page, so the page is reloaded in this case.
In the code, type="button color" is syntactically erroneous and gets ignored, so the default type=submit applies. The attribute specification type="button" is correct and makes the button element a “pure button” so that clicking on it has only the scripted effects, no form submission.
If you wish to style some button element(s) in a special way, use a class attribute, e.g. <button type="button" class="color">. The type attribute takes only a limited set of keywords as its values, each having a fixed meanig.
There are many legends about them. I want to know the truth. What are the differences between the two following examples?
<input type='submit' value='text' />
<button type='submit'>text</button>
Not sure where you get your legends from but:
Submit button with <button>
As with:
<button type="submit">(html content)</button>
IE6 will submit all text for this button between the tags, other browsers will only submit the value. Using <button> gives you more layout freedom over the design of the button. In all its intents and purposes, it seemed excellent at first, but various browser quirks make it hard to use at times.
In your example, IE6 will send text to the server, while most other browsers will send nothing. To make it cross-browser compatible, use <button type="submit" value="text">text</button>. Better yet: don't use the value, because if you add HTML it becomes rather tricky what is received on server side. Instead, if you must send an extra value, use a hidden field.
Button with <input>
As with:
<input type="button" />
By default, this does next to nothing. It will not even submit your form. You can only place text on the button and give it a size and a border by means of CSS. Its original (and current) intent was to execute a script without the need to submit the form to the server.
Normal submit button with <input>
As with:
<input type="submit" />
Like the former, but actually submits the surrounding form.
Image submit button with <input>
As with:
<input type="image" />
Like the former (submit), it will also submit a form, but you can use any image. This used to be the preferred way to use images as buttons when a form needed submitting. For more control, <button> is now used. This can also be used for server side image maps but that's a rarity these days. When you use the usemap-attribute and (with or without that attribute), the browser will send the mouse-pointer X/Y coordinates to the server (more precisely, the mouse-pointer location inside the button of the moment you click it). If you just ignore these extras, it is nothing more than a submit button disguised as an image.
There are some subtle differences between browsers, but all will submit the value-attribute, except for the <button> tag as explained above.
With <button>, you can use img tags, etc. where text is
<button type='submit'> text -- can be img etc. </button>
with <input> type, you are limited to text
In summary :
<input type="submit">
<button type="submit"> Submit </button>
Both by default will visually draw a button that performs the same action (submit the form).
However, it is recommended to use <button type="submit"> because it has better semantics, better ARIA support and it is easier to style.
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 :(