Remplir un input à partir d'autres inputs

Bonjour à tous !

Tout d'abord, je tiens à dire que je suis extrêmement débutante en JS (pour tout dire j'en avais jamais fais avant lundi...).

Voilà mon soucis : j'ai un formulaire d'ajout d'utilisateurs avec plusieurs champs, dont trois qui m'intéressent pour ce problème (name, first_name, et username).
Je souhaiterais que quand je rentre un name, et un first_name, mon champ username se remplisse avec le name et la première lettre du first_name (Ex: Jean Dupont => dupontj)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// Mon formulaire (fait avec CakePHP)
 
<?= $this->Html->script('jquery1.11.3.min.js') ?>
<?= $this->fetch('script') ?>
<?= $this->Html->script('users.js') ?>
 
<div class="container">
    <div class="row row-offcanvas row-offcanvas-right">
        <?php 
            // Appel du menuAdmin.ctp
            $page_en_cours = 'indexUsers';
            echo $this->element('menuAdmin', compact('page_en_cours'));
        ?>
 
        <div class="col-xs-12 col-sm-9">
            <div class="jumbotron">
                <div class="users form large-9 medium-8 columns content">
                    <h3>Création d'un nouvel utilisateur</h3>
 
                    <?= $this->Form->create($user) ?>                    
                    <fieldset>
                        <div class="input text required">
                            <label for="name">Nom</label>
                            <input type="text" name="name" required="required" maxlength="20" id="name" onkeyup="remplir()" />
                        </div>
                        <div class="input text required">
                            <label for="first-name">Prénom</label>
                            <input type="text" name="first_name" required="required" maxlength="20" id="first-name" onkeyup="remplir()" />
                        </div>
                        <div class="input text required">
                            <label for="username">Identifiant</label>
                            <input type="text" name="username" required="required" maxlength="20" id="username" />
                        </div>
                        <?php
                            //echo $this->Form->input('name', ['label' => 'Nom']);
                            //echo $this->Form->input('first_name', ['label' => 'Prénom']);
                            echo $this->Form->input('email', ['label' => 'Email']);
                            //echo $this->Form->input('username', ['label' => 'Identifiant']);
                            echo $this->Form->input('password', ['label' => 'Mot de passe']);
                            //echo $this->Form->input('pass2', ['type' => 'password', 'label' => 'Confirmation']);
                            echo $this->Form->input('profil_id', ['options' => $profiles, 'label' => 'Profil']);
                            echo $this->Form->input('status', array('label' => 'Statut', 'type' => 'select', 'options' => ['Actif', 'Inactif']));
                            echo $this->Form->input('first_connect');            
                        ?>
                    </fieldset>
                    <div class="submit" id="ajouter">
                        <input class="btn" type="submit" value="Publier" />
                        <input class="btn" type="button" onclick="window.location.replace('/Intranet/users/index')" value="Annuler" />
                    </div>
                    <?= $this->Form->end() ?>
                </div>
            </div>
        </div><!--/.col-xs-12.col-sm-9-->                
    </div><!--/row-->
</div><!--/.container-->

Code:

1
2
3
4
5
6
// Ma fonction remplir()
function remplir()
{
	//alert('bonjour');
	document.getElementById('username').value = document.getElementById('name').value + document.getElementById('first_name').value;
}

Pour commencer j'ai juste chercher à remplir mon input avec le nom et le prénom sans chercher à mettre que la première lettre.
Toutefois, comme vous pouvez vous en douter, ça ne fonctionne pas :(

Merci par avance pour votre aide !
Ju'