jQuery: generate a code from user input

by gabrieleromanato

HTML

<form action="#" id="test" method="post">
    <div>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" />
    </div>
    <div>
        <label for="email">E-mail</label>
        <input type="text" name="email" id="email" />
    </div>
    <p><input type="submit" name="submit" value="Generate code" /></p>
</form>

CSS

form {
    margin: 2em auto;
    width: 40em;
    font: 90% Arial, sans-serif;
}

div {
    margin-bottom: 1em;
}

label {
    display: block;
    font-weight: bold;
}

div input {
    font: 1.4em Arial, sans-serif;
}

p {
    margin: 1em 0;
}

p input {
    font: 1.4em Arial, sans-serif;
}

JavaScript

var generateCode = function(str) {
    var $length = 8;
    var $code = '';
    for (var i = 0; i < $length; i++) {

        $code += str[Math.floor(Math.random() * (str.length - 1))];

    }

    return $code;

}



$('#test').submit(function(e) {
    e.preventDefault();
    var $str = '';
    $('input[type="text"]', '#test').each(function() {
        $str += $(this).val();
    });

    var code = generateCode($str);
    alert(code);
});