Question

I have an application that requires both first name and last name. I need to have the username field automatically fill up as the user types in their first and last names to suggest a username. Right now, it works to a degree. This is the function that executes on a keyup for the name fields.

suggestUsername: function() {
  var username = this.$('#user_login_field').val();
  var first = this.$('#user_first_name_field').val();
  var last = this.$('#user_last_name_field').val();
  if(first == '' && last == ''){
    this.$('#user_login_field').val('');
  } else {
    this.$('#user_login_field').val(first+'.'+last);
  }
},

This works unless the user adds something to the username manually and then goes back to one of the name fields and enters something else. In the case that that happens, whatever the user added manually disappears. Not sure how to go about fixing it

Answer 1

Add an jQuery focus handler to the #user_login_field that unbinds the keypress events from the first and last name fields. (http://api.jquery.com/focus/)

$('#user_login_field').focus(function (e) {
  // Unbind the keyup events
  $('#user_first_name_field').unbind('keypress');
  $('#user_last_name_field').unbind('keypress');
});