Using JavaScript to Dynamically Generate the Username within an HTML Form

Usernames are typically made up of some combination of the user's first and last name. If that's the case, the form used to create those usernames could be modified to take advantage of the data in the first and last name fields. Instead of making someone manually type the username, JavaScript could be employed to generate it automatically.

Base Code

When creating login accounts for a website's members only section, a common format for the username is to use the person's first initial and last name. So, let's say our form contains fields for the first name, last name, and username. Of course, the form would need more fields, a password field for example, but we'll keep things simple.

<form method="post" name="form" action="">
<div><label for="fname">First Name: </label><input type="text" name="fname" id="fname" /></div>
<div><label for="lname">Last Name: </label><input type="text" name="lname" id="lname" /></div>
<div><label for="username">Username: </label><input type="text" name="username" id="username" /></div>
</form>

Adding JavaScript

As it stands, those filling out the form will need to manually complete all three fields. But, with a little JavaScript magic, we could dynamically create a username once the first and last name is known. Since forms are typically filled out from top to bottom, it's a safe bet that we'll have what's needed once the last name is filled out. So let's add an onblur event to the last name field.

...
<div><label for="lname">Last Name: </label><input type="text" name="lname" id="lname" onblur="" /></div>
...

Before doing anything, we need to check that the first and last name was entered. We should also make sure the username hasn't already been entered.

...
<div><label for="lname">Last Name: </label><input type="text" name="lname" id="lname" onblur="
if(document.form.username.value=='' && document.form.fname.value!='' && document.form.lname.value!='') {
}
" /></div>
...

Now we'll grab the user's first initial and last name and merge them for the username.

...
if(document.form.username.value=='' && document.form.fname.value!='' && document.form.lname.value!='') {
     var username = document.form.fname.value.substr(0,1) + document.form.lname.value.substr(0,49);
}" /></div>
...

The code so far will work with most names. However, there may be issues with names containing apostrophes, hyphens, or spaces. So let's add some code to remove unwanted characters.

...
     var username = document.form.fname.value.substr(0,1) + document.form.lname.value.substr(0,49);
     username = username.replace(/\s+/g, '');
     username = username.replace(/\'+/g, '');
     username = username.replace(/-+/g, '');

}" /></div>
...

Before inserting the username into the form, let's also make everything lower case.

...
     username = username.replace(/\s+/g, '');
     username = username.replace(/\'+/g, '');
     username = username.replace(/-+/g, '');
     username = username.toLowerCase();
}"/></div>
...

Once the username is formatted as needed, we just need to store the results into the username field.

...
     username = username.toLowerCase();
     document.form.username.value = username;
}"/></div>
...

Final Code

Adding the following code to an HTML file should provide a working example of the JavaScript solution.

<form method="post" name="form" action="">
<div><label for="fname">First Name: </label><input type="text" name="fname" id="fname" /></div>
<div><label for="lname">Last Name: </label><input type="text" name="lname" id="lname" onblur="
if(document.form.username.value=='' && document.form.fname.value!='' && document.form.lname.value!='') {
     var username = document.form.fname.value.substr(0,1) +      document.form.lname.value.substr(0,49);
     username = username.replace(/\s+/g, '');
     username = username.replace(/\'+/g, '');
     username = username.replace(/-+/g, '');
     username = username.toLowerCase();
     document.form.username.value = username;
}" /></div>
<div><label for="username">Username: </label><input type="text" name="username" id="username" /></div>
</form>

Conclusion

With the JavaScript code in place, those filling out the form will have an easier time. Plus the username entered is more likely to match the formatting guidelines you have in place. Of course, it's still necessary to double check the username with a server-side language such as PHP. You'll also need to make sure the username doesn't already exist.

Related Posts

1 Comment

  • #1 renren on 08.16.17 at 1:52 pm

    what if the generated username has the same in the database how can i add the 2nd letter of the first name? reply asap thanks! good job man its working.

Leave a Comment