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.
0 Comments
There are currently no comments.
Leave a Comment