Forum Academy Marketplace Showcase Pricing Features

Tabbing on entry of 1 character

Hi,

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:

  1. 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.
  2. 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.

If this works, I’ll share it!

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…

1 Like

Correct, @john3 approach works well.

To solve for “Numbers Only,” on the Input, change the “Content format” to Integer (options to set a min/max will appear)

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”).

3 Likes

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”

It’s not as easy as I’d have thought.

Many thanks.

It’s easier than you think.

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.

1 Like

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).

1 Like

Thanks both -

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.

1 Like

Went the database route - success.

You guys are legends… still working on the overall piece, but I’ll certainly put it up when done.

This topic was automatically closed after 70 days. New replies are no longer allowed.