HTML/JavaScript password input onKeyUp for browser auto fill - javascript

I have a password input element and and some radio buttons on an HTML form -- a login form for a web site. When the user enters text in the password input box, it should select one of the radio buttons. I do this by selecting the radio button in the password input's onKeyUp handler.
However, some users use their browser's password save feature, which automatically fills in the password (and other text input fields) on the form. However, at least on Chrome and Firefox, the password auto-fill does not save the state of the radio buttons on the login form.
I need to select this radio button when the browser auto fills the password input, in the same way I select it when the user types in the password input.
Is there another event besides onKeyUp that will fire when the browser fills in the text? If not, is there some other way I can accomplish this?
Goal: Select a radio button if a password is entered in a password input, whether it's entered by keyboard or filled in by browser.

You can trigger the keyup event when the page loads, so it will do your work if some text is been written on that filed by the browser.
setTimeout(function() {
$('#your_field').trigger('keyup');
},250);

Related

Handle form submission (by pressing enter etc.) from particular form fields only

I have a complex form with many different types of fields and a submit button. As far as I'm aware, a form can be submitted by clicking the submit button, by pressing Enter in certain form fields (for example text input fields), and on mobile devices by pressing the submit button on the on-screen keyboard. There may be more ways to submit the form that I'm not aware of.
I would like to register a separate (JavaScript) submit handler that applies when the form is submitted only within a certain section of the form. Pressing the submit button or submitting the form from a form field outside of the special section should call the regular submit handler, but submitting the form from a form field inside the special section should call another handler. One particular challenge in my case is that some of my form fields are rendered by third-party React components, and I don't have the possibility to control their DOM.
I could come up with ideas that go in the following directions:
Somehow find out from which form element the form was submitted, and check whether that element is within the special section. The problem is that I have not been able to find a way to detect the originating form field on the submit event.
Use nested forms and put the special form group in its own form with its own submit button and submit event handler. The problem is that there seems to be no supported way of nesting forms in HTML.
Use the form attribute on each input field within the special form group and point it to a separate form with its own submit button and submit event handler. I am assuming that this would produce the desired behaviour. Unfortunately, I cannot add this attribute to all input fields, since I don't control their DOM.
React to keydown events with key set to Enter. The first problem is that pressing Enter only submits the form in certain cases. For example, pressing enter in a text input submits the form, but pressing enter in a textarea or a button input does not. In some cases such as a file input (which sometimes consists of a text field and a button) I'm not even sure and the behaviour between browsers is probably inconsistent. So I don't know under what conditions even to call the submit handler. The second problem is that I assume that this does not take other submission methods into consideration, such as the submit key on touch devices.
Is there a good way to catch the form submission from within a certain section of the form only?

Check if a blur event of an input field is fired while clicking on a radio button

I have an input field and two radio buttons. I would like to evaluate the form data whenever the form has changed. Strictly speaking, I want to react to the blur event of the input field. However, there is a situation where a user enters a value in the input field and (without pressing enter or clicking anywhere with the mouse) clicks directly on the radio buttons. Now there is the effect that the radio buttons are visually displayed to the user as checked, but the blur event is already fired. At this point, no radio button was technically checked yet.
For technical reasons, however, the radio selection must already exist in the form.
So my question is: Is it possible to check at the blur event whether the user has clicked on a radio button? It is about firing the event afterwards in such a special case (so that the selection of the radio button can be included in an evaluation).
(By the way: I use angular for my project. Just in case this could make a difference.)
Thanks in advance.

Automating filling an asp form which only has radio button and records only user clicks using JavaScript

There is an ASP form which I need to fill recurringly so I thought of automating the process. But the thing is it only accepts user clicks and no other input method. That is, it records input only when user clicks on the radio button. I tried using:
document.getElementsByName("elementName").value = my_value;
but it doesn't seem to work. Is there a way around this?

Adobe Livecycle - form submit occurring before field exit

My office is working with LiveCycle ES4 and I'm kinda new to it. I have a form that contains some custom validation javascript which gets called in the submit event of a submit button, which works fine. The form is deployed in Livecycle Workbench, which replaces the in-form submit button with the workbench 'complete' button.
We're running into a problem where if a user enters data in one of the required fields, then clicks the Workbench Complete button, the exit event for that field doesn't fire, which means the rawValue is not set to the value the user entered. So when the validation runs as part of the submit event, it fails, even though the user has entered text in that field.
Is there some way to change this up so it shifts focus out of the current field when clicking the Workspace button?
There are ways the ensure that this does not happen.
One of the ways to do this is to place an if statement in the submit button code so that the form submission happens only when the rawValue of that field is populated. If the if statement does not evaluate to true, the submit code does not execute and you dont have to worry about this problem.
Also, If the field is not populated, your code can also set the focus to that field so that the user is automatically navigated to the field in question.
Hopefully this strategy helps. Please let me know if you have any other questions.
Thanks,
Armaghan.

Focus cursor to a submit button

I have a standard form for a user login.
When I input the username and password, then press enter it gives the search result. The search text box is in the same page.
I want to set the focus on the submit button. The enter key issue only exists in IE? What can I do to solve this problem?
You can focus anything with the focus() javascript method. This has nothing to do with PHP.
document.getElementById('ID_Name_Of_Your_Button').focus();
Submit button must be defined in the same form tag as the other form elements. And submit will be fired on what form you are focused while pressing [enter].
You don't need to focus any submit buttons in your case.
And the document content is needed for the more exact answer of course.

Categories

Resources