daanl/gist:4594370

## gistfile1.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
    <script type="text/javascript">
        (function(window, $) {

            var defaults = {
                selectors: {
                    fullname: "#fullname",
                    firstname: "#firstname",
                    lastname: "#lastname"
                }
            }

            var nameConcatenater = function(options)
            {
                this.options = $.extend(defaults, options);
                this.setBindings();
            };

            nameConcatenater.prototype.setBindings = function()
            {
                var self = this;

                $(self.options.selectors.firstname).on('keyup', function() {
                    self.updateFullname();
                });

                $(self.options.selectors.lastname).on('keyup', function() {
                    self.updateFullname();
                });
            };

            nameConcatenater.prototype.updateFullname = function() {

                var self = this;

                var firstname = $(self.options.selectors.firstname).val();
                var lastname = $(self.options.selectors.lastname).val();

                $(self.options.selectors.fullname).text(firstname + ' ' + lastname);
            };

            window.NameConcatenater = nameConcatenater;

        })(window, jQuery);
    </script>

    <script type="text/javascript">
        $(function() {
            var instance = new NameConcatenater();
        });
    </script>
</head>
<body>
    <h1>
        <span>
            Fullname:
        </span>
        <span id="fullname"></span>
    </h1>

    <label>firstname</label> <input type="text" id="firstname" />
    <label>lastname</label> <input type="text" id="lastname" />
</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<title></title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
	<script type="text/javascript">
	(function(window, $) {

	var defaults = {
	selectors: {
	fullname: "#fullname",
	firstname: "#firstname",
	lastname: "#lastname"
	}
	}

	var nameConcatenater = function(options)
	{
	this.options = $.extend(defaults, options);
	this.setBindings();
	};

	nameConcatenater.prototype.setBindings = function()
	{
	var self = this;

	$(self.options.selectors.firstname).on('keyup', function() {
	self.updateFullname();
	});

	$(self.options.selectors.lastname).on('keyup', function() {
	self.updateFullname();
	});
	};

	nameConcatenater.prototype.updateFullname = function() {

	var self = this;

	var firstname = $(self.options.selectors.firstname).val();
	var lastname = $(self.options.selectors.lastname).val();

	$(self.options.selectors.fullname).text(firstname + ' ' + lastname);
	};

	window.NameConcatenater = nameConcatenater;

	})(window, jQuery);
	</script>

	<script type="text/javascript">
	$(function() {
	var instance = new NameConcatenater();
	});
	</script>
	</head>
	<body>
	<h1>
	<span>
	Fullname:
	</span>
	<span id="fullname"></span>
	</h1>

	<label>firstname</label> <input type="text" id="firstname" />
	<label>lastname</label> <input type="text" id="lastname" />
	</body>
	</html>