Filtrer les donnees en utilisant jquery avec php

ananias8686 -  
ananias8686 Messages postés 96 Statut Membre -

Bonjour,

J ai un formulaire Nom, Telephone et Adresse

Je voudrais que lorsqu'un client sélectionne un nom, les champs "Telephones" et "Adresse" se remplissent automatiquement. Je veux egalement filtrer les donnéés depuis la bdd dans le champ "nom".

Je voudrais un resultat comme sur l image ci dessous pour le champs "nom":

J'ai essayer mais je n'obtiens aucun resultat dans les champs Telephone et Adresse: De plus mon select nom ne donne pas la possibilité au client de filtrer les informations.

Quelqu'un peut m'aider svp ?

Mon code: 

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script>
      $(document).ready(function(){
        $("#name").on("keyup", function() {
          var value = $(this).val().toLowerCase();
          $("#name option").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
          });
        });
      });
    </script>
  </head>
  <body>
   <form>
    <label for="name">name :</label>
    <select id="name" name="name">
      <option value="">-- Sélectionnez --</option>
      <?php
        $servername = "localhost";
        $username = "";
        $password = "";
        $dbname = "";

        // Create connection
        $conn = mysqli_connect($servername, $username, $password, $dbname);

        // Check connection
        if (!$conn) {
            die("Connection failed: " . mysqli_connect_error());
        }

        // Query to retrieve data from the database
        $sql = "SELECT nom, tel, adr FROM beneficiaire";
        $result = mysqli_query($conn, $sql);
        if (!$result) {
            echo "Erreur lors de l'exécution de la requête : " . mysqli_error($conn);
            exit;
        }

        while ($row = mysqli_fetch_assoc($result)) {
          echo "<option value='".$row['nom']."'>".$row['nom']."</option>";
        }

        // Close the connection
        mysqli_close($conn);
      ?>
    </select>
  
    <label for="iban">Telephone :</label>
    <input type="text" id="tel" name="tel" readonly>
  
    <label for="bic">Adresse : :</label>
    <input type="text" id="adr" name="adr" readonly>
  </form>
  </body>
</html>


Windows / Chrome 109.0.0.0

A voir également:

9 réponses

Réponse 1 / 9
jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention   4 758
 

Bonjour

Pour obtenir ce que tu souhaites, le mieux c'est d'utiliser un autocomplite en ajax regarde du côté de la librairie jQuery UI, tu trouveras des exemples pour l'utiliser.
0
Réponse 2 / 9
ananias8686 Messages postés 96 Statut Membre
 

Un lien pour m aider je vous en prie 
0
jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention   4 758
 

par exemple : https://www.google.com/search?q=jquery+ui+autocomplete+ajax

0
Réponse 3 / 9
ananias8686 Messages postés 96 Statut Membre
 

J ai réussi a le faire par contre il y a un petit probleme. Quand je selectionne le nom, les autres champs se remplissent correctement mais le champ 'nom' reste vide.

 Code html:

<!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();
  if (selectedText) {
    // Remplir le champ nom avec le texte sélectionné
    $('#nom').val(selectedText);
  }
});



      // 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>

Code get_data.php

<?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 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);

0
jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention   4 758
 

Retire la ligne 68 de ton code au niveau du JavaScript

0
Réponse 4 / 9
ananias8686 Messages postés 96 Statut Membre
 

Merci de votre réponse, malheuresement ca ne marche pas.

Dans la console je vois undefined pour console.log(selectedText) et Simon(le nom selectionné pour console.log($('#nom').val())
0
jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention   4 758
 

Si tu veux remettre la ligne 68

il faut, pour que ça marche, ajouter le champ "nom" dans ta requête

$sql = "SELECT tel, adr FROM beneficiaire WHERE nom = :nom";

// ---> 
$sql = "SELECT nom, tel, adr FROM beneficiaire WHERE nom = :nom";

Je pense aussi que tu aurais pu directement récupérer les infos dans ton search.php  et les remplir lors du "select" de ton autocomplete au lieu de refaire un second appel ajax

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
ananias8686 Messages postés 96 Statut Membre
 

J ai rajouter la ligne 68, j ai modifier la requete mais le probleme est toujours le meme.

Voici le contenu de search.php

<?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);

?>

0
Réponse 6 / 9
jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention   4 758
 

La c'est le fonctionnement de ton select2

mais vu que tu as sélectionné une valeur.. tu n'as pas besoin de remettre sa valeur en js .. puisque tu as déjà cliqué sur la valeur voulu...

Ton console.log n'est pas utile et le code en dessous non plus...
0
Réponse 7 / 9
ananias8686 Messages postés 96 Statut Membre
 

Comment je peux procéder pour récupérer la valeur sélectionné dans le champ nom, j ai essayer de faire de plusieurs façon mais en vain, je vous prie de bien vouloir m aider.
0
jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention   4 758
 

regarde bien ta capture écran avec tes deux console.log ....

qui concerne le code :

}).on('select2:select', function(e) {
    console.log(selectedText);
      console.log($('#nom').val());
  var selectedText = $('#nom').val();
  if (selectedText) {
    // Remplir le champ nom avec le texte sélectionné
    $('#nom').val(selectedText);
  }
});

tu verras que le souci n'est pas sur le nom ... mais sur ta variable selectedText  .. qui n'existe pas et donc, te retourne un "undefined" dans la console.

Et comme le nom est bien déjà présent.. pourquoi vouloir l'écraser par une autre variable ?

ton if et ce qu'il contient ne sert à rien !

0
Réponse 8 / 9
ananias8686 Messages postés 96 Statut Membre
 

J ai supprimé le if mais le probleme persite, le champ nom reste vide
0
jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention   4 758
 

Montre ton code modifié

Pense aussi à nous montrer le code de tes fichiers php ( dont le search.php)

0
ananias8686 Messages postés 96 Statut Membre > jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention  
 

Bonjour 

Pourriez-vous m aidez s il vous plait ?

0
Réponse 9 / 9
ananias8686 Messages postés 96 Statut Membre
 

Le formulaire avec js

<!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>

Code get_data.php

<?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

<?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);

?>
0
ananias8686 Messages postés 96 Statut Membre
 

Bonjour 
quelqu'un pourrait m'aider svp

0

Discussions similaires

ne pas utiliser la souris mais le clavier
isabela -
thomas-richet -

32 réponses
Selectionner sans souris =)
chapeau chapeau -
john -

8 réponses
copier/coller a partir du clavier ?
just-giirly-x3 -
Capucine -

46 réponses
Excel supprimer une mise en forme de tableau
pépé35530 -
allezlom -

24 réponses
touche clavier pour un copier/coller
kamande9 -
Mwa_Noah -

1 réponse