I have a login page in classic asp which contains two buttons login and signup . Also i have a submit button which is hidden .On form submit i am checking the
if request.form(submit) = login
then login steps
else request.form(signup) = signup
it works fine in all browsers but in IE when i hit the enter key it esacpe the request.form(submit) = login and request.form(signup) = signup but when i click on enter button then it works fine . Any idea why i am getting nothing on the request.form(submit) = login .
The problem is pretty basic and fundamental: Internet Explorer does not have "default" submit button. Every browser is free to choose how to behave in case of submitting a form via ENTER key, modern browsers choose the logical way of sending the value of the first submit button (as if it was clicked) while IE, being IE, choose the unfriendly way. No surprise and no way to fix the root of this "problem" unless you happen to write the code for IE.
The only way around this is using JavaScript and forcing the browser to choose specific submit button upon pressing ENTER. For this, first add unique ID to the login button:
<input type="submit" name="submit" value="login" id="btnLogin" />
Now add onkeypress handler to your form tag:
<form action="YourPage.asp" method="POST" onkeypress="if (event.keyCode === 13) { document.getElementById('btnLogin').click(); return false; }">
This will emulate clicking the login button whenever ENTER is pressed inside the form.
Only downside of this approach is that if your form contains <textarea>, pressing ENTER in them will also submit the form which is not a good thing. To have them behave as they should behave add this to each of them:
<textarea onkeypress="event.cancelBubble = true;">
The above will cancel the event from bubbling upwards to the <form> keypress event.
Related
I have a single page React app with a simple login form with two buttons LOGIN and BACK. If I click BACK LastPass still offers to save the entered username/password, even though I didn't login.
Is there any way to tell LastPass that the back button is a cancel button for the login form and that it shouldn't try to save the username/password in that case?
HTML looks something like this:
<input name="username" type="text" />
<button type="submit">LOGIN</button>
<button>BACK</button>
You can use <input type="reset" /> or <button type="reset">.
As its name says, a reset button is ment to cancel a form. When it is activated, all user inputs are cancelled and the fields are reset back to their default values, i.e. the ones that were specified in the HTML code.
In JavaScript, You may intercept an activation of the reset button by using the reset event on the parent form, i.e. form.onreset=..., form.addEvementListener('reset', ...) or <form onreset="...">.
Note that, as for submit buttons, it's a bad practice to intercept the click event directly on the button by using onclick: although there is no universal standard way to cancel the form as there is with the enter key to submit it (escape key don't cancel the form by default), you can't be sure that there is no other way to cancel the form than click on the reset button.
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)
The title speaks for itself... I have a couple of forms, one of them is just a single text input form and the other one is composed by two text inputs. I do not want any submit button in any of them, I want each form to submit whenever the user presses the ENTER button at any text input:
The form composed by just one input submits everytime the user presses the ENTER button - Perfect!
The second form composed by two text inputs does not behave this way, it does not submit when the user presses the ENTER button at any of both inputs.
Is there a way to make a form with more than one text input behave this way and avoid having a submit button in it?
Try adding this between the <form></form> tags
<input type="submit" style="display: none" />
Tested it and it works on Firefox and Chrome. If you have a submit input type in the form, enter should automatically submit it, regardless of whether it's visible or not.
I am actually using this myself in a login form, though in the username field, it makes more sense to move to the next field than to submit. Just in case you have a similar use case, here's the code I used (requires jQuery)
$('#username').keypress(function(event) {
if (event.keyCode == 13 || event.which == 13) {
$('#password').focus();
event.preventDefault();
}
});
Note that there is a slight bug though -- if the user selects a browser autocomplete username and presses enter, it still moves to the next field instead of selecting it. Didn't have time to debug this, but if someone can figure out how to fix it, that would be cool.
I was looking for a solution to this problem and want to share my solution, based on many posts over here. (Tested on modern Chrome/Firefox/IE)
So, using only Javascript the follow code submits the form if ENTER key is pressed on any field or if the button Submit is pressed. After that it clear/reset the form, which is a nice thing to do.
Hope it helps.
<!DOCTYPE html>
<html>
<body>
<p>Based on http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onsubmit</p>
<p>When you submit the form, a function is triggered which alerts some text.</p>
<div onKeyPress="return myFunction(event)">
<form id="form01" action="demo_form.asp" onsubmit="return false;" >
Enter name: <input type="text" name="fname">
<input type="button" value="Submit" onclick="myFunction(0)">
</form>
</div>
<script>
function myFunction(e) {
if((e && e.keyCode == 13) || e == 0) {
alert("The form was submitted");
document.forms.form01.submit();
document.forms.form01.fname.value = ""; // could be form01.reset as well
}
}
</script>
</body>
</html>
Be sure that your inputs are inside "form" element and give the "form" element an "action" attribute.
You will have to look for the Enter key press. This post here shows how to do that.
Enter key press event in JavaScript
You can use the code below to submit a form after pressing Enter.
<input id="videoid" placeholder="Enter the video ID">
<button id="mybutton" type="button" onclick="myFunction()">Submit</button>
<script>
var input = document.getElementById("videoid");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("mybutton").click();
}
});
</script>
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 :(
I had designed an HTML form with submit button. But instead of submit it to another page I want to submit to pop up windows where I can limit the size of the pop up windows say "320x240" hide all the toolbar, disable resize.
Here's my go at it; this JavaScript snippet should go into the head of your page:
<script>
process = function()
{
window.open('about:blank', 'popup', 'width=320,height=240,resizeable=no');
document.login.setAttribute('target', 'popup');
document.login.setAttribute('onsubmit', '');
document.login.submit();
};
</script>
And this is a sample form for demonstration purposes:
<form action="handle.html" method="get" name="login" onsubmit="process(); return false;">
Username: <input type="text" name="username" id="username" /><br />
<input type="submit" />
</form>
Now, here's what's happening: first, we set up a form and give it an onsubmit attribute that tells it to run the function process() and return false; instead of submitting normally; from this point, that function takes over and creates a popup window, giving it a name, and some features (by all means, add any surplus ones you'd like), and then attention comes back to the form, where we now set the target attribute to the name of the window we just created.
We then have to clear that onsubmit that we set earlier, or this same exact thing will happen again, and that's certainly not what you want. Finally, we just have the form submitted again and it now passes all of its information to the popped window; from there, it's just getting handle.html (or whatever you end up calling your processing page) to do its work with the data.
Hope I've helped.