Code for Dynamically Format User Inputs While They Are Typing

Ask the community
,
1

Hello everyone!
1/ I need some code which can show you how to do this for phone numbers of the format (xxx) xxx-xxxx. Only numbers are allowed to be entered, with the brackets and dash being automatically applied.

2/ I also need code which can show how to do this for capitalizing all letters in a text field.

3/ I also need code which can show how to do this for capitalizing first letter of each word and then all other letters in lower case in a text field.

I am not a programmer so please put all the code I need as I need it so I can only copy paste.
I know how to go to properties and then add “onKeyPress” function but that is all so please show me the whole thing as it should look like beginning to end, including the “;” and “{”, etc…

Thanks a lot!

1 Like
2

You can’t do that whilst they are typing in a text element.

You would need to do it through a beforeInsert datahook, so that it can change the user input before it is saved into a dataset.

See here for more examples.
https://www.wix.com/corvid/reference/wix-data.Hooks.html
https://support.wix.com/en/article/corvid-tutorial-processing-user-input-before-it-is-stored-in-a-collection-with-data-hooks
https://support.wix.com/en/article/corvid-using-data-hooks
https://support.wix.com/en/article/corvid-about-data-hooks-for-dynamic-pages

If you are looking for somebody to write all your code for you, then check Wix Arena to find a suitable Wix Expert that would be suitable for yourself. https://www.wix.com/arena/

3

I just need the formatting to be the same for all fields as I have them show in a repeater (directory) and I need all the repeaters to look the same, not as the users insert in user input field.

If I cannot have it done as they type, can I have it saveguarded properly so it displays always the same way?
Or maybe can I format the database where they go so all looks the same?

Thanks!

4

@annesophiesayman

That is all described in the links provided.

…In our example, the following beforeInsert hook does two things:
Formats the first and last names so that regardless of how users type their names they:

  • Start with a capital letter.

  • The rest of the letters are lowercase…

5

@givemeawhisky Hey! Thanks! I managed to add the beforeInsert hook

I used this code but somehow it does not work… error message is as below “cannot read property”

1440Ă—900 110 KB

Here is the code I inserted in data.js… do you see somehting wrong? (Profiles is name of dataset)

export function Profiles_beforeInsert(item, context) {
item.firstName = toUpperFirst(item.firstName);
item.lastName = toUpperFirst(item.lastName);
item.DBA = toUpperFirst(item.DBA);
item.City = toUpperFirst(item.City);
return item;
}

function toUpperFirst(s) {
return s.charAt(0).toUpperCase() + s.slice(1);
}

I read that I can create the function toUpperFirst in a separate file but not sure how and where…

Thanks for your help! So complicated…

6

Just saw that I need to use text key not name… so I changed that…

7

So here I am with the lastest… I got all worked out… and it was working… BUT all of a sudden it stopped and I kept getting an error message when I try to submit a new form from the editor.

This is crazy. I read from port from March 20 that there was an issue like this. Was it not resolve since then?

Here is my latest code so you can see what I did last (it worked)

export function Profiles_beforeInsert(item, context) {
item.firstName = uppercaseFirstEach(item.firstName);
item.lastName = uppercaseFirstEach(item.lastName);
item.state = uppercaseFirstEach(item.state);
item.dba = uppercaseFirstEach(item.dba);
item.city = uppercaseFirstEach(item.city);
item.license = toUpperCase(item.license);
item.email = toLowerCase(item.email);
return item;
}

function toUpperCase(s) {
return s.toUpperCase();
}

function toLowerCase(s) {
return s.toLowerCase();
}

function uppercaseFirstEach(s)
{
var array1 = s.split(’ ');
var newarray1 = ;

for(var x = 0; x < array1.length; x++){
newarray1.push(array1.charAt(0).toUpperCase()+array1.slice(1).toLowerCase());
}
return newarray1.join(’ ');
}