Take the 2-minute tour ×

I have the following form fields:

<label for="user_email"><?php _e('Your Email'); ?>: </label>
<input type="text" name="user_email" value="<?php echo esc_attr(stripslashes($user_email)); ?>" size="25" id="user_email" class="required email" tabindex="102" />

<label for="user_login"><?php _e('Username'); ?>: </label>
<input type="text" name="user_login" value="<?php echo esc_attr(stripslashes($user_login)); ?>" size="20" id="user_login" tabindex="101" class="required" />

Is there any way to make the user_login field populate in real time from the input into user_email (ideally letter by letter, if not, after unfocused), stopping before the @ sign, so that when a user fills in "example@example.com" into the user_email field, the user_login field is automatically populated with "example"?

I would like to ultimately set the username field as hidden, but would like to see if it works visibly first.

share|improve this question
If you made it hidden then couldn't two people have the same username? joe@hotmail.com and joe@yahoo.co.uk –  Timm Aug 15 '12 at 10:37
@Tim is right. I don't think it is a good idea to hide the field, see my answer for details. –  Tim Büthe Aug 15 '12 at 10:47
If you're planning to make it hidden why do you need it populated letter by letter as the user types? –  nnnnnn Aug 15 '12 at 11:02

2 Answers 2

fire this on keyup or other relevant action according to need:


You should make changes possible:

Set up:

var userNoEdit = true;

On event change of email:



on event MANUAL change of username:

userNoEdit = false;
share|improve this answer

Yes, you can listen to key events and set the value to the other field like this:

    var email = $('#user_email').val();
    var index = email.indexOf('@');
    var username = index >= 0 ? email.substring(0, index) : email;

See this fiddle

I think this function might be handy to suggest some username, but the user should be able to overwrite it. Maybe he wants a different name or the name is already taken. Otherwise you could just use the whole email address ad the username like facebook does this for example.

Besides, if you hide the username field you can just leave it out and get the username from the email address on the server side using PHP. Remember that the user could send you some other value, just by manipulating the page with the browser included tools. Or maybe JavaScript is disabled and the field will be blank.

In a nutshell: You should how the field and let the user use it, or just remove it completely.

share|improve this answer

Your Answer


