I’m trying to create a form in which a user enters a 6 digit ‘pin code’ into 6 separate text input fields.
I have limited each input to 1 character. The idea is that the 6 inputs concatenated will be compared to a randomly generated string.
This is to create an alternative to having to leave the app to validate the email address.
Questions:
Is there a way that I can ensure that the action of typing a number automatically tabs to the next block? I currently need to press tab or click the next input.
Is there a way to restrict the type of characters entered to ‘Numbers Only’? I am currently able to enter any character.
Many thanks as always to the community for your support.
I think you could setup a series of workflow statements with “Do When Condition is True” have one setup for each element with a condition that says when that is element is not empty. As part of that set the focus to the next element. That would do automatic tabbing for you I think but I haven’t tried it…
To create this, you will want to create 5 different workflows (since 5 advances are required)
Demo GIF of how to create that workflow (Note: you access this not by clicking on the element to Start/Edit workflow. Rather, “Click here to add an event”).
John, Dan - I thank you kindlly - these two posts solve my problem perfectly.
I have another question if either of you or anyone else can spare the time:
upon an event, how do I concatenate all 6 of these text boxes into one single string in order to compare to the randomly generated 6 digits which are sitting in a string from a previous event?
I’m looking for a function similar to the & function in excel. (Ie. set value = Input1&Input2&Input3&Input4&Input5&Input6) resulting in value = “123456”
On your submit workflow for the data field for the response you can set the response = first tab box, second tab box etc… values - just line them up one after the other without commas and you will get your string lined up.
Agree with @john3. The only thing I might add is ensuring that inputs are not empty and/or that the action only takes place when the number of characters = 6. This will likely cut down on potential user errors. (ie. they focus the wrong box first, etc).
John , this is my problem - I can’t line them up without commas (or line them up at all). Only able to to add one value, and then apply one operator to that value (eg. trimmed, truncate to etc)
Ah I thought you would assign it to a database table field? I’m not clear on why you are using set state?
Don’t you want to compare what they input against something that’s saved in the database?
Otherwise if you don’t want to save it I would make a hidden text box and assign its value the combination of the input fields then you can use that box for comparison purposes.
