Random Unique ID Generator

by Ryan Brackett

HTML

<b>Characters used to generate ID:</b>
<input type="text" id="char_set" />

<b>ID character length:</b>
<input type="text" id="char_count" value="20" />

<b>Number of unique IDs needed:</b>
<input type="text" id="id_count" value="50" />

<button id="generate">Generate New IDs</button>
<button id="shuffle" class="hidden">Shuffle Results</button>
<br/><br/><br/><br/>
<b>Results:</b>
<div id="results"></div>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    padding: 3%;
}
div {
    margin-bottom: 20px;
}
input {
    padding: 5px 2%;
    width: 96%;
    margin-bottom: 20px;
    display: block;
}
#results {
    font-size: 12px;
    line-height: 1em;
    padding: 20px 0px;
    font-family: Courier;
    letter-spacing: 2px;
    word-break: break-all;
}
#char_set {
}
#char_count, #id_count {
}
.hidden {
    display: none
}
hr {
    height: 0px;
    border: none;
    border-top: 1px solid #dedede;
}

JavaScript

/* 

Author: Andrew Clarke

Random unique ID generator for use in a friend's research study.

*/

(function () {

    'use strict';

    var charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+',
        charSetSize, charCount, idCount, generatedIds,

        initialize = function () {
            $('#char_set').val(charSet);
            $('#generate').click(buttonClicked).one('click', revealShuffle);
            $('#shuffle').click(shuffleClicked);
        },

        render = function () {
            $('#results').html(generatedIds.join('<hr/>'));
        },

        buttonClicked = function () {
            charSet = $.trim($('#char_set').val());
            charSetSize = charSet.length;
            charCount = parseInt($('#char_count').val());
            idCount = parseInt($('#id_count').val());

            // field validation
            if (!charSet || !charCount || !idCount) {
                alert('Fill in all fields.');
                return;
            }

            // prevents infinite loop when generatedIds
            // could not be fully populated
            if (charCount * charSetSize < idCount) {
                alert('Not enough uniques available.');
                return;
            }

            generatedIds = [];
            while (generatedIds.length < idCount) {
                var id = generateRandomId();
                if ($.inArray(id, generatedIds) == -1) generatedIds.push(id);
            }

            render();
        },

        revealShuffle = function () {
            $('#shuffle').removeClass('hidden');
        },

        shuffleClicked = function () {
            generatedIds = shuffleArray(generatedIds);
            render();
        },

        generateRandomId = function () {
            var id = '';
            for (var i = 1; i <= charCount; i++) {
                var randPos = Math.floor(Math.random() * charSetSize);
                id += charSet[randPos];
            }
       ...