Move cursor to next input field automatically

0
Hello everyone,   Sorry in advance if this question was asked in other wordings already, but I couldn’t find it.   I'm trying to make the cursor move to a next input field after a user entered a couple is digits in the first input field. I couldn’t find a ‘Mendix-way’ of doing this, so I tried doing it via javascript.   I used the function document.getElementById(‘nameoftextbox’).focus(); but the problem her is that the id of the field is variable. For example: the first time the id of the textbox field is "51.UitvoeringTenH.SelecteerTijd.textBox2.48_obl_118" and the next time the id of the textbox field is “51.UitvoeringTenH.SelecteerTijd.textBox2.48_tip_66” . This means the javascript functions can’t find the textbox where to focus the cursor next.   My question is twofold: Is there a ‘normal Mendix-way’ of moving the cursor automatically to a certain next field? Is there a way to do this with javascript like I tried?   Thanks in advance for reading and for your help!   Jan-Willem    
asked
1 answers
1

Hi Jan-Willem,

You're on the right path. You need to use some JavaScript to set the focus. I recommend putting an onChange nanoflow listener on the form field that calls a JavaScript action whenever the condition to jump to the next form field is triggered. You can indeed not use ID's, as they are managed by Mendix and are not reliable. However, the Name that you can configure for any widget is transformed into a class like so: .mx-name-<Name>. So you can use that reliably to find the target using

document.getElementsByClassName('mx-name-nameoftextbox')[0]

Alternatively, you can get all form fields on a page doing something like

document.getElementsByClassName('form-group');

Then determining which one in the resulting array has focus, and moving to the next form field by focusing the index + 1. That should lead to a generic JavaScript action that will go to the next form field anywhere.

Note that you need to find a child of the resulting object, since the actual input is a child of the form-group.

answered