Sujet Précédent Sujet Suivant

Filtrer les donnees en utilisant jquery avec php

Fermé
ananias8686 - Modifié le 15 févr. 2023 à 20:59
ananias8686 Messages postés 86 Date d'inscription samedi 9 février 2019 Statut Membre Dernière intervention 19 août 2023 - 21 févr. 2023 à 11:19

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

9 réponses

Réponse 1 / 9
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
15 févr. 2023 à 21:07

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 86 Date d'inscription samedi 9 février 2019 Statut Membre Dernière intervention 19 août 2023
15 févr. 2023 à 21:32

Un lien pour m aider je vous en prie 
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
15 févr. 2023 à 21:46

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

0
Réponse 3 / 9
ananias8686 Messages postés 86 Date d'inscription samedi 9 février 2019 Statut Membre Dernière intervention 19 août 2023
16 févr. 2023 à 03:26

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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
16 févr. 2023 à 08:03

Retire la ligne 68 de ton code au niveau du JavaScript

0
Réponse 4 / 9
ananias8686 Messages postés 86 Date d'inscription samedi 9 février 2019 Statut Membre Dernière intervention 19 août 2023
16 févr. 2023 à 08:12

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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
16 févr. 2023 à 08:40

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 86 Date d'inscription samedi 9 février 2019 Statut Membre Dernière intervention 19 août 2023
16 févr. 2023 à 08:55

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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
16 févr. 2023 à 09:01

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 86 Date d'inscription samedi 9 février 2019 Statut Membre Dernière intervention 19 août 2023
16 févr. 2023 à 10:06

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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
16 févr. 2023 à 10:15

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 86 Date d'inscription samedi 9 février 2019 Statut Membre Dernière intervention 19 août 2023
16 févr. 2023 à 10:46

J ai supprimé le if mais le probleme persite, le champ nom reste vide
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
16 févr. 2023 à 11:35

Montre ton code modifié

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

0
ananias8686 Messages postés 86 Date d'inscription samedi 9 février 2019 Statut Membre Dernière intervention 19 août 2023 > jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024
21 févr. 2023 à 11:19

Bonjour 

Pourriez-vous m aidez s il vous plait ?

0
Réponse 9 / 9
ananias8686 Messages postés 86 Date d'inscription samedi 9 février 2019 Statut Membre Dernière intervention 19 août 2023
16 févr. 2023 à 11:47

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 86 Date d'inscription samedi 9 février 2019 Statut Membre Dernière intervention 19 août 2023
17 févr. 2023 à 09:47

Bonjour 
quelqu'un pourrait m'aider svp

0

Discussions similaires

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

32 réponses
ALERT en php
snoopy -
appkech -

14 réponses
Germain
germai -
Dexterccm -

1 réponse
balise de retour à la ligne en php
2I++ -
Naguez Abderraouf -

5 réponses
Exemple de base de données access
Abdlahsaki -
Fleptche -

9 réponses