Bonjour,

J'ai un formulaire Nom, Téléphone et Adresse.
Je voudrais que lorsqu'un client sélectionne un nom, les champs "Telephones" et "Adresse" se remplissent automatiquement.
J arrive a le faire par contre après sélection, mon champs "nom" reste vide alors que les champs tel et adr se remplissent correctement.
Nom : Capture.JPG Affichages : 117 Taille : 12,8 Ko
Comment afficher la valeur selectionné dans le champs 'nom'.
Je vous prie de bien vouloir m'aider

Le formulaire avec js
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
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
  <title>Formulaire </title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-BJnMxKY7XJivOD+pi8eWteNd1RiMbPCJzQQIFviRJgo0p/zzZMi1CmYTgEdz/2CszgJjKk3TqtHZItp0JHvJng==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
 
  <script>
    $(document).ready(function() {
      // Initialise le champ "nom" en utilisant Select2
      console.log("Appel de select2");
      
 
      $('#nom').select2({
  placeholder: 'Sélectionnez',
  allowClear: true,
  language: {
        searching: function() {
            return "";
        }
    },
  minimumInputLength: 0, // Nombre minimal de caractères pour lancer une recherche
  ajax: {
    url: 'search.php',
    dataType: 'json',
    delay: 0, // Delai d'attente avant d'envoyer la requête
    data: function(params) {
      return {
        q: params.term // Terme de recherche saisi par l'utilisateur
      };
    },
    processResults: function(data) {
      return {
        results: data
      };
    },
    cache: true
  }
}).on('select2:select', function(e) {
    console.log(selectedText);
      console.log($('#nom').val());
  var selectedText = $('#nom').val();
 
 
});
 
 
 
      // Ecouteur d'événement "change" pour le champ "nom"
      $('#nom').on('change', function() {
        // Obtient la valeur sélectionnée pour "nom"
        var nom = $(this).val();
 
        // Envoi d'une requête AJAX pour récupérer les données associées au nom sélectionné
        $.ajax({
          url: 'get_data.php',
          method: 'POST',
          data: {nom: nom},
          dataType: 'json',
          success: function(response) {
            // Met à jour les champs "tel" et "adr" avec les données récupérées
            $('#tel').val(response.tel);
            $('#adr').val(response.adr);
            $('#nom').val(response.nom);
          },
          error: function(xhr, status, error) {
            console.error(error);
          }
        });
      });
    });
  </script>
</head>
<body>
  <h1>Formulaire de recherche</h1>
<form>
  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="nom"><br>
  <label for="tel">Téléphone :</label>
  <input type="text" id="tel" name="tel" readonly><br>
  <label for="adr">Adresse :</label>
  <input type="text" id="adr" name="adr" readonly>
</form>
 
</body>
</html>

Mon code get_data.php
Code php : 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
<?php
// Connexion à la base de données
$host = 'localhost';
$user = '';
$password = '';
$dbnom = '';
$dsn = "mysql:host=$host;dbname=$dbnom;charset=utf8mb4";
 
try {
  $pdo = new PDO($dsn, $user, $password);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
  echo 'Erreur de connexion à la base de données : ' . $e->getMessage();
  exit;
}
 
// Obtient le nom sélectionné par l'utilisateur
$nom = $_POST['nom'] ?? '';
 
// Requête SQL pour récupérer les données associées au nom sélectionné
$sql = "SELECT nom, tel, adr FROM beneficiaire WHERE nom = :nom";
$stmt = $pdo->prepare($sql);
$stmt->execute(['nom' => $nom]);
$result = $stmt->fetch(PDO::FETCH_ASSOC);
 
// Envoi des résultats au format JSON
header('Content-Type: application/json');
echo json_encode($result);

Fichier search.php
Code php : 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
<?php
// Connexion à la base de données
$host = 'localhost';
$user = '';
$password = '';
$dbnom = '';
$dsn = "mysql:host=$host;dbname=$dbnom;charset=utf8mb4";
 
try {
  $pdo = new PDO($dsn, $user, $password);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
  echo 'Erreur de connexion à la base de données : ' . $e->getMessage();
  exit;
}
 
// Obtient le terme de recherche saisi par l'utilisateur
$q = $_GET['q'] ?? '';
 
// Requête SQL pour récupérer les noms correspondant au terme de recherche
$sql = "SELECT nom, tel FROM beneficiaire WHERE nom LIKE :q";
$stmt = $pdo->prepare($sql);
$stmt->execute(['q' => "%$q%"]);
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
 
// Formatte les résultats pour qu'ils soient utilisables par Select2
$autocomplete_results = [];
foreach ($results as $result) {
  $autocomplete_results[] = [
    'id' => $result['nom'],
    'text' => $result['nom'].' - '.$result['tel']
  ];
}
 
// Envoi des résultats au format JSON
header('Content-Type: application/json');
echo json_encode($autocomplete_results);
 
?>