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.
Related
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)
For a Project, in which we are not yet allowed to use php, I want to create a login page. I just can't figure out how to make it so the cancel button and the submit button take me to predefined pages. I want to be able to input some dummy data into the username password fields and when I press submit be sent to the "logged in" part of my site.
<button type="submit" value="profil.html">Login</button>
I tried it like that but it doesn't work. I also tried that:
<form action="profil.html" method="get">
You can use little bit of js to achieve it cleanly.
<button value="Cancel" onclick="window.location.href='otherpage.html'"> Cancel</button>
Set the action in the form. Use a submit button to submit the data to that URL.
"Cancel" means "Give up on the form and go somewhere else". To go somewhere else: Use a link.
<button>Login</button>
Cancel
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.
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.
Suppose I have the following HTML form:
<form>
...
<input type="submit" name="queue" value="Queue item">
<input type="submit" name="submit" value="Submit item">
</form>
How do I know which button the user clicked (without using javascript)?
I looked at submitted data and it seems that when "Queue Item" is clicked then "queue" = "Queue Item" gets sent to the server. And when "Submit item" is clicked then "submit" = "Submit item" sets sent.
Can I rely on this behavior? Is it documented somewhere in the standard on HTML forms? How do you guys do it?
Yes, you can rely on this; it's fully documented here. The specific relevant lines say:
When a form is submitted for processing, some controls have their name paired with their current value and these pairs are submitted with the form. Those controls for which name/value pairs are submitted are called successful controls.
and
If a form contains more than one submit button, only the activated submit button is successful.
Yep you can rely on that behaviour.
When <input type="submit" name="queue" value="Queue item"> is clicked, the field "queue" will be set and "submit" will not be.
Whereas when the other gets clicked, the field "submit" will be set, and "queue" will not be.
If you're not assured by this, you can split them into 2 forms and work on it that way.
You can rely on this behavior. You get the value of the input. I would use javascript to toggle a hidden form value, but since you mentioned no javascript you do not have multiple choices.
It's a standard. Since it's an input tag, and has a value, that means you get the value submitted.
Split the form into two forms, replicating any other inputs needed by the other action. Or, if you really just need to know if the user wants to "queue vs. submit" the item, change both submit buttons to radio selections to toggle between the two options, and have a new, separate "submit the form" button.
In that situation if you want a one-click option, you could use Javascript to detect when one of the radio buttons is selected, and auto-submit the form instantly. (Using Javascript for user interface, rather than form handling)