How to combine both id in javascript

Question

Currently I'm developing an application for my wife to use, due to she is not a computer savvy, I tried to make things easier for her to work out and easier for me to detect any error in future.

So I found a slug generator based on jquery that can automatic transfer the input box with id labeled to the slug box. I believe this is most useful for me as my wife can skipped the option on slug and instead of entering non related slug.

So here is the javascript:

(function ($) {
    // DONT FORGET TO NAME YOUR PLUGIN
    jQuery.fn.makeSlug = function (options, i) {
        if (this.length > 1) {
            var a = new Array();
            this.each(
                function (i) {
                    a.push($(this).makeSlug(options, i));
                });
            return a;
        }
        var opts = $.extend({}, $().makeSlug.defaults, options);

        /* PUBLIC FUNCTIONS */

        this.destroy = function (reInit) {
            var container = this;
            var reInit = (reInit != undefined) ? reInit : false;
            $(container).removeData('makeSlug'); // this removes the flag so we can re-initialize
        };

        this.update = function (options) {
            opts = null;
            opts = $.extend({}, $().makeSlug.defaults, options);
            this.destroy(true);
            return this.init();
        };

        this.init = function (iteration) {
            if ($(container).data('makeSlug') == true)
                return this; // this stops double initialization

            // call a function before you do anything
            if (opts.beforeCreateFunction != null && $.isFunction(opts.beforeCreateFunction))
                opts.beforeCreateFunction(targetSection, opts);

            var container = this; // reference to the object you're manipulating. To jquery it, use $(container). 

            $(container).keyup(function(){
                if(opts.slug !== null) opts.slug.val(makeSlug($(this).val()));
            });

            $(container).data('makeSlug', true);

            // call a function after you've initialized your plugin
            if (opts.afterCreateFunction != null && $.isFunction(opts.afterCreateFunction))
                opts.afterCreateFunction(targetSection, opts);
            return this;
        };

        /* PRIVATE FUNCTIONS */

        function makeSlug(str) { 
            str = str.replace(/^\s+|\s+$/g, ''); // trim
            str = str.toLowerCase();

            // remove accents, swap ñ for n, etc
            var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
            var to   = "aaaaeeeeiiiioooouuuunc------";
            for (var i=0, l=from.length ; i<l ; i++) {
                str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
            }

            str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
            .replace(/\s+/g, '-') // collapse whitespace and replace by -
            .replace(/-+/g, '-'); // collapse dashes

            return str;
        };

        // Finally
        return this.init(i);
    };

    // DONT FORGET TO NAME YOUR DEFAULTS WITH THE SAME NAME
    jQuery.fn.makeSlug.defaults = {
        slug: null,
        beforeCreateFunction: null, // Remember: these are function _references_ not function calls
        afterCreateFunction: null
    };
})(jQuery);

And here is the call script code:

<script type="text/javascript">
<!--
    $(document).ready(function(){
    $('#fname').makeSlug({
        slug: $('#slug')
    });
});
-->
</script>

And here is my form:

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

What I intended to do is, both First Name & Last Name input combine and generate in the slug input box.

For Example:

First Name: Jeff

Last Name: Jamie Hayden

Slug: jeff-jamie-hayden

But the current script only work on my First Name label, I would like to add in Last Name as well, kindly advise me where and how to achieve it.

Thank you so much to all SO guru that spend your time reading and understanding my problem and assist me.

Answer 1

Down and dirty? This replaces the slug plugin.

$('#fname,#lname').keyup(function() { // *FANCIER* using this would trigger slug creation on the fly as you type either first OR last name
$('#lname').blur(function() { // *SIMPLER* this triggers the slug to create when the last name has been typed
    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');
});

JSFiddle