[AJAX] Remplir un formulaire de manière automatique

**caema** · 29/09/2013, 10h30

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

**elfamine** · 29/09/2013, 18h27

Puisque ton code fonctionne il suffit de l'adapter pour avoir le resultat que tu souhaite

plus precisement cette partie la :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('result').innerHTML = datas_json.nom + " " + datas_json.prenom + " - " + datas_json.date_naissance;

en

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
document.getElementById('nom').value =  datas_json.nom;
document.getElementById('prenom').value = datas_json.prenom;
document.getElementById('date-naissance').value = datas_json.date_naissance;

et avoir un formulaire à remplir dans ton html...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<form>
    <input type="button" value="Tournesol" onclick="test_json('tournesol')" />
    <input type="button" value="Dupond" onclick="test_json('dupond')" />
    <input type="button" value="Inconnu" onclick="test_json('inconnu')" />
    <br>
    <label for="nom">Nom :</label>
    <input name="nom" id="nom" value="">
    <br>
    <label for="prenom">Prénom :</label>
    <input name="prenom" id="prenom" value="">
    <br>
    <label for="date-naissance">Date de naissance :</label>
    <input name="date-naissance" id="date-naissance" value="">
    <br>
</form>

[AJAX] Remplir un formulaire de manière automatique

AJAX

Vue hybride

Discussions similaires

Partager

Partager