[AJAX] Remplir un formulaire de manière automatique

Bonjour à tous,

Pour les besoin d'un travail scolaire, je dois réaliser à l'aide d'AJAX et JSON un petit formulaire qui "s'auto-rempli" lorsque l'on clique sur un bouton.

J'ai d'abord créer une variante, qui me semblait plus simple: lorsque l'on clique sur un bouton, le contenu s'affiche dans une div. Cet exemple fonctionne bien, et voici le code utilisé pour le réaliser:

Mon fichier index.php:

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
 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Test AJAX - autocomplétion</title>
        <script type="text/javascript">
            function test_json(nom) {
                var url = 'http://localhost/Ajax/noms/test_json.php?nom=' + nom;
                var xhr = new XMLHttpRequest();
 
                xhr.open('GET', url);
                xhr.send(null);
 
                xhr.onreadystatechange = function() {
                    switch (xhr.readyState) {
                        case xhr.DONE:
                            if (xhr.status == 200) {
                                var datas_json = JSON.parse(xhr.responseText);
                                document.getElementById('result').innerHTML = datas_json.nom + " " + datas_json.prenom + " - " + datas_json.date_naissance;
                            } else {
                                alert(xhr.statusText);
                            }
                            break;
                    }
                };
            }
        </script>
    </head>
    <body>     
        <h1>Choisir le nom</h1>
        <form>
            <input type="button" value="Tournesol" onclick="test_json('tournesol')"/>
            <input type="button" value="Dupond" onclick="test_json('dupond')"/>
        </form>
 
        <div id="result"></div>
    </body>
</html>

Mon fichier test_json.php

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
 
<?php
 
if (isset($_GET['nom'])) {
    switch ($_GET['nom']) {
        case 'tournesol':
            $eleve = array(
                'nom' => 'Tournsol',
                'prenom' => 'Tryphon',
                'date_naissance' => '21/12/1940');
            break;
        case 'dupond':
            $eleve = array(
                'nom' => 'Dupond',
                'prenom' => 'Pierre',
                'date_naissance' => '21/12/1958');
            break;
        default:
            $eleve = array(
                'nom' => 'Inconnu',
                'prenom' => 'Soldat',
                'date_naissance' => '08/05/1945');
            break;
    }
}
 
$datas_json = json_encode($eleve);
 
echo $datas_json;
?>

Les informations correspondant au nom sur lequel je clique s'affichent bien dans mon div.

Ce que je souhaite maintenant faire, c'est utiliser ces informations pour "auto-remplir" un formulaire situé à la place de ma div "result".

Si quelqu'un pouvait m'aider à y voir plus clair, ça serait très aimable. J'ai du louper quelque chose dans la logique mais quoi...

D'avance grand merci à vous!