IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

[AJAX] Remplir un formulaire de manière automatique


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Femme Profil pro
    Inscrit en
    Avril 2011
    Messages
    127
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Belgique

    Informations forums :
    Inscription : Avril 2011
    Messages : 127
    Par défaut [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 : 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!

  2. #2
    Membre expérimenté Avatar de elfamine
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2011
    Messages
    113
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2011
    Messages : 113
    Par défaut
    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>

Discussions similaires

  1. Réponses: 1
    Dernier message: 25/06/2009, 12h08
  2. Réponses: 4
    Dernier message: 22/06/2009, 12h12
  3. Réponses: 1
    Dernier message: 06/05/2009, 11h18
  4. [AJAX] Remplir un formulaire sans recharger la page
    Par houdazcom dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 06/11/2007, 12h37
  5. [AJAX] Remplir un formulaire chargé en AJAX
    Par lemok dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 12/07/2007, 10h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo