I have several onClick event handlers in a custom form. However, if a user filling out the form uses the tab key to navigate through the form fields, the onClick events do not execute. Any ideas how I can overcome this problem?
If you use the search function on this forum and simply search for tab, you will find a good many previous posts about using the tab button.
Thank you for replying! I’m afraid I don’t see anything at all that addresses my specific issue when I search the forum as you suggested.
Okay, so where are the buttons in the forms? Are they just submit buttons or are they in certain places in your form?
What you will might find is that even though you are tabbing to another input, that the actual user input is not recognizing being selected and having something typed into it.
Have you tried clicking into the user input box and then clicking out and trying the button again?
Also, it would be good if you could show a pic if the form and any code used in a code block.
@givemeawhisky Most of my form is collapsed on load. Inputs made in form inputs fields determine which sections of the form are expanded or not. It’s like a multi-step form.
I’m revealing sections of my form on a step-by-step basis, as input elements are clicked. As an example, a text input element, when clicked leads to a radio button, or number input element being expanded through the use of the onClick event handler.
As expected that all works fine when those elements are clicked, but when the tab key is used to move from one element to the next (as opposed to clicking) then the event handler does not execute.
Below is an example of the code I’ve used:
export function companyName_click(event) {
if ($w("#companyNumber").collapsed) {
$w("#companyNumber").expand();
} else {
$w("#companyNumber").collapse();
}
}
Hope all that helps!
The onClick event just happening when the button is clicked. I still dont understand your problem, but you problem can resolve that change the code for onMouseIn event.
Okay, so you are not using the tab key to simply switch between user inputs then.
You are trying to use the tab key as a way of clicking on a button instead.
So, that will not work as the onClick event is a mouse event. The click event is raised when the user clicks on an element. It fires after the mousedown and mouseup events, in that order.
https://www.w3schools.com/jsref/event_onclick.asp
https://www.w3schools.com/jsref/obj_mouseevent.asp
If you are looking to use a keyboard button instead of clicking on a button, then you can look at using onKeyPress instead which you put on the user input instead.
https://www.wix.com/corvid/reference/$w.TextInputMixin.html#onKeyPress
https://www.wix.com/corvid/forum/corvid-tips-and-updates/give-the-textinput-onkeypress-function-some-time
Also, as you are using collapse and expand, you should make sure that they are setup correctly so that they are not being affected by others on the same page.
https://support.wix.com/en/article/corvid-how-page-layout-is-affected-when-elements-change-size
I am not trying to use the tab key as a way of navigating between form fields, but someone who uses my form might do that, and that is what I’m trying to find a solution for. onClick may not be the most appropriate event handler to use.