Slugger

HTML

<span class="label">First Name:</span> 
<input type="text" name="fname" maxlength="20" id="fname" placeholder="First Name" />
<br />
<br />
<br /> <span class="label">Slug :</span> 
<input type="text" name="slug" maxlength="20" id="slug" placeholder="Slug" />
<br />
<br />

JavaScript

$(function () {
    $('#fname,#lname').keyup(function () {
        var f = $('#fname').val(); // get the first name
        f = f.toLowerCase(); // convert it to lower case
        f = f.replace(/[^a-z0-9 -]/g, ''); // remove invalid characters
        f = f.replace(/\s+/g, '-'); // replace whitespace with dash
        f = f.replace(/-+/g, '-'); // replace space with dash
        var l = $('#lname').val();
        l = l.toLowerCase();
        l = l.replace(/[^a-z0-9 -]/g, '');
        l = l.replace(/\s+/g, '-');
        l = l.replace(/-+/g, '-');
        var s = f + '-' + l; // concatenate resulting first and last to slug
        $('#slug').val(s).attr('readonly', 'readonly');
    });
});