JSFiddle - React, Tailwind, and code Playground

by SpaceDog

HTML

<form action="" method="POST" class="fos_user_resetting_request form-inline" role="form" id="fos_user_resetting_request">
    <fieldset>
        <legend>Recover lost password</legend>
        <div class="form-group">
            <select class="form-control" name="rif" id="rif">
                <option value="J">J</option>
                <option value="G">G</option>
                <option value="V">V</option>
                <option value="E">E</option>
            </select>
        </div>
        <div class="form-group">
            <input type="hidden" id="username" name="_username"  />
            <input type="text" class="form-control col-xs-6 numeric" id="fake_username" name="fake_username" required="required" placeholder="" />
        </div>
        <button type="submit" id="reset_btn" class="btn">Send</button>
    </fieldset>
</form>

JavaScript

$(document).ready(function() {
        function result() {
            var s = $('#rif').find(":selected").val(), i = $('#fake_username').val();
            $('#username').val(s + i);
        }

        $('#rif').on('change', result);
        $('#fake_username').on('keyup', result);

        $(".numeric").keydown(function(e) {
            if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 || (e.keyCode == 65 && e.ctrlKey === true) || (e.keyCode >= 35 && e.keyCode <= 39)) {
                return;
            }

            if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                e.preventDefault();
            }
        });
    });