title: How to automatically create a username combining two fields with jQuery or javascript?
body: <p>I've made the following code:</p>
  
  <pre><code>var fname = "";
  var lname = "";
  var username = "";
  
  $('#new-user-form input[name=fname]').on('keyup', function() {
      var fname = $('#new-user-form input[name=fname]').val().substring(0,1).toLowerCase();
      var username = fname + lname;
      $('#new-user-form input[name=username]').val(username);
  });
  $('#new-user-form input[name=lname]').on('keyup', function() {
      var lname = $('#new-user-form input[name=lname]').val().toLowerCase();
      var username = fname + lname;
      $('#new-user-form input[name=username]').val(username);
  });
  </code></pre>
  
  <p>What I want is for the username field to be filled automatically with the first letter of the first name and all of the last name. It kinda works but for each field individually. If I type Mario in the fname field, the letter m appears in the username field but as soon I start typing into the lname field, the username field clears up and only the lowercase last name appears. What am I missing?</p>
  
  <p>Thanks in advance!</p>