[AJAX] Remplir formulaire après sélection d'une valeur d'une liste déroulante

Bonjour,
Je suis 'newbie' en développement web, et je viens solliciter votre aide.
Je suis sur un projet en php qui me fait office d'entraînement, et j'ai un problème. Je voudrais sur une page dédiée à la modification des données, remplir le formulaire (je veux dire les input) avec les données de la base de données qui correspondent à la valeur sélectionnée dans la liste déroulante. la table en question gère les quartiers, table quartier(id, nom, longitude, latitude, population), alors j'ai rempli la liste en php avec les noms des quartiers, je voudrais par exemple que les champs longitude, latitude, population se remplissent avec les bonnes valeurs quand on sélectionne un quartier dans la liste déroulante. J'ai lu que c'est faisable en javascript mais je suis nul en js, et ce que je trouve depuis hier ne marche pas. Excusez la longueur du post, je voulais tout expliquer et être assez clair.

Voila le code du formulaire:

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
<form method="POST" action="modif.php">
    <ul>
        <li>
            <?php 
                try 
                    { 
                        $bdd=new PDO('mysql:host=localhost;dbname=dakar', 'root', '');
                        $reponse = $bdd->query("select nom from quartier");
            ?>
            <label for="noms">Choisir le quartier:</label>
            <select id="noms" name="noms" onchange="change()">
            <?php 
                            while ($data = $reponse->fetch()){ 
            ?> 
                           <option><?php echo $data['nom']; ?></option> 
            <?php 
                            } 
            ?> 
            </select>
            <?php 
                            $reponse->closeCursor(); // Termine le traitement de la requête 
 
                    } 
                catch(Exception $e) 
                    { 
                        // En cas d'erreur précédemment, on affiche un message et on arrête tout 
                        die('Erreur : '.$e->getMessage()); 
                    } 
            ?> 
        </li>
        <li>
            <label for="longitude">Longitude:</label>
            <input type="text" size="40" id="long" name="long" disabled/>
        </li>
        <li>
            <label for="longitude">Latitude:</label>
            <input type="text" size="40" id="lati" name="lati" class="ajax"/>
        </li>
        <li>
            <label for="longitude">Population:</label>
            <input type="text" size="40" id="popu" name="popu" class="ajax"/>
        </li>
    </ul>
    <p>
        <button type="submit" class="action">Enregistrer</button>
        <button type="reset" class="right">Annuler</button>
    </p>
</form>

Merci davance à tous.