Can I use autotab function on WIX form

Discussion Ask a question
, ,
1

Hi, I’m completely new to Corvid, so I apologize for the possible stupidity of the question in advance.

I have used a WIX form and I need it to autotab between fields once each one reaches maxLength. I tried to use this in the page code:

700×196 4.11 KB

But not working, is there some way of doing this? Would have thought WIX forms would do it automatically once the maxLength has been set, but not sure where to find this setting.

Thanks
Kathy

2

Hi there

Please use a custom form, with input fields, and use onInput( ) function to determain whether the input field reached its maximum length, here’s how:

// Declare a constant about the input fields and their maximum length:
const inputs = [
    {
        index: 0,
        id: '#name',
        max: 30
    },
    {
        index: 1,
        id: '#serialNumber',
        max: 35
    }
]

inputs.forEach(input => {
    $w(input.id).onInput(() => {
        validateField(input.id);
    })
})


function validateField(id) {
    const inputId = id;
    let index = inputs.map(items => items.id).indexOf(inputId);
    if (index > -1) {
        const inputDetails = inputs[index];
        const input = $w(inputId);
        
        if (input.value.length >= inputDetails.max) {
            if (index + 1 <= inputs.length) {
                const nextId = inputs[index+1].id;
                $w(nextId).focus();
            }
        }
    }
}

I took an extra mile to make it compatible with as many fields as you want, you just need to add them in their particular order, set their IDs and their maximum length, and you’re ready to rock.

Hope you find this useful.
Ahmad

3

Hello Ahmad,

Thank you so much for your help, I’m sorry I couldn’t get it to work. I have made a custom form. If I understand correctly I only need to change the id and max properties to match my form in declaring a constant?

Thanks
Kathy

4

Yes, you only need to change the array with your IDs and the maximum values.
I had a typo in my code, I’ve updated it, you can use the updated version to see if it fixed your issue.

5

@ahmadnasriya It worked! Thank you sooooo much!!

6

@katherines Glad that it worked :blush: You’re welcome.
Feel free to tag me whenever you want.