PHP Mysql et Javascript : Affichage dans plusieurs input selon (autocomplétion)

Résolu
Jules_2569 -  
Bonjour a tous,

J'ai une fenêtre modal ou j'entre le nom d'un article ou d'un service, quand je tape les premières lettres, l'autocomplétion me permet de sélectionner l'article parmi une liste et d'en afficher le prix, pour pouvoir l'insérer dans une autre table.

Maintenant je souhaiterais afficher une deuxième valeur en plus du prix, l'ID du produits ou service sélectionnée.

Pour afficher le prix, j'utilise le fichier items.php pour la requête SQL, le fichier autocomplete.php pour le javascript et la page du formulaire (modal) pour les champs input.

Sur le fichier items.php au niveau de la requête ligne 10 : 
   $query = "SELECT prix_ht as value,  item as label  FROM items WHERE item like'%".$search."%'";


J'ai essayer en ajoutant id_items en le séparant d'une virgule (jai essayé plusieurs combinaisons) a côté de prix_ht : 

   $query = "SELECT id_items, prix_ht as value,  item as label  FROM items WHERE item like'%".$search."%'";


dans ce cas la il va seulement afficher la valeur de prix_ht sur les 2 champs input même celui réservé a id_items.

J'ai aussi ajouté pour le champs input : id_items dans le fichier autocomplete.php en dessous de la ligne 21 la ligne ci dessous : 

 $('#id_items').val(ui.item.value); // save selected id to input


ça m'affiche systématiquement la même valeur sur les 2 champs input du formulaire.

quelqu'un saurait pourquoi ce qui fonctionne avec un champs ne fonctionne pas avec 2.

Merci d'avance

Fenêtre modal : 

<div class="modal-dialog" role="document" >
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
        </button>

      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>item:</label>
          <input type="text" class="form-control" id="autocompletei" name="item" value="">
          <input type="hidden" class="form-control" id="id_items" name="id_items">
        </div>        
        <div class="form-group">
         <label>Prix HT:</label>
         <input type="number" class="form-control" id="prix_ht"   name="prix_ht" value="">
       </div>
   <div class="modal-footer">
  <div align="left">
    <button type="reset" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <button type="submit" name="createItems" class="btn btn-space btn-primary">Ouvrir la  demande</button>
  </form>
</div>
</div>


autocomplete.php : 


        $( function() {
          
          $( "#autocompletei" ).autocomplete({
            source: function( request, response ) {
              
              $.ajax({
                url: "<?php echo URLSITE;?>/fetch/Items.php",
                type: 'post',
                dataType: "json",
                data: {
                  search: request.term 
                },
                success: function( data ) {
                  response( data );
                }
              });
            },
            select: function (event, ui) {
                $('#autocompletei').val(ui.item.label); // display the selected text
                $('#prix_ht').val(ui.item.value); // save selected id to input
                $('#id_items').val(ui.item.value); // save selected id to input
                return false;
              }
            });
          
        });
        function split( val ) {
          return val.split( /,\s*/ );
        }
        function extractLast( term ) {
          return split( term ).pop();
        }


items.php : 
 <?php 
require "../inc/connexion.php";

//connexion à la bdd
$bdd = getDB();


if(isset($_POST['search'])){
   $search = $_POST['search'];
   $query = "SELECT id_items, prix_ht as value,  item as label  FROM items WHERE item like'%".$search."%'";   

   try{
    $requete = $bdd -> prepare($query) ;   
    $requete->execute() ;
  //var_dump($requete);
    $response= $requete->fetchAll(); // on stocke le resultat dans un array
 

  }catch(Exception $e){
    // en cas d'erreur :
     $response = " Erreur ! ".$e->getMessage();
  
  }
  echo json_encode($response);
 // var_dump($response);
  exit;
}

10 réponses

  1.  jordane45 Modérateur
    Bonjour,

    Sans regarder plus loin ... tu as écris 
    $('#prix_ht').val(ui.item.value); // save selected id to input
$('#id_items').val(ui.item.value);


    Sauf que tu veux 1 value
    et 1 ids
    Donc 
    $('#prix_ht').val(ui.item.value); // save selected id to input
$('#id_items').val(ui.item.id_items);


    1. Jules_2569 Auteur
      Merci Jordane,

      La requête ci-dessous est correcte ? 

         $query = "SELECT id_items, prix_ht as value,  item as label  FROM items WHERE item like'%".$search."%'";


      J'ai fais la modifiication ci-dessous :

      ça me renseigne l'id_items ça l'affiche dans le champs input prix_ht et dans le champs ,id_items je n'ai rien 

      $('#prix_ht').val(ui.item.value); // save selected id to input
$('#id_items').val(ui.item.id_items); // save selected id to input
      1. jordane45 Modérateur
        As tu vidé le cache de ton navigateur ?
      2. Jules_2569 Auteur
        @jordane45Je viens de le faire, j'ai essayé avec un autre navigateur pas encore utilisé c'est pareil. 

        $('#prix_ht').val(ui.item.value); // save selected id to input
$('#id_items').val(ui.item.id_items); // save selected id to input


        Dans la console j'ai ça?

        Json
        0:79
        1:9
        2: PREMIUM PETITE CITADINES
        prix_ht : 79
        value: 9
        label: PREMIUM PETITE CITADINES
      3. jordane45 Modérateur
        @Jules_2569Peux tu nous faire une capture écran de la console en nous affichant l'onglet REPONSE de l'ajax ?
        (je te conseille d'utiliser FIREFOX pour ça, la console est plus simple à utiliser pour l'ajax)
        Comme sur cette image


    2. Jules_2569 Auteur




      1. jordane45 Modérateur
        Vu ce que ça te retourne... je doute que la requête que tu exécutes soit bien celle là 
        $query = "SELECT id_items, prix_ht as value,  item as label  FROM items WHERE item like'%".$search."%'";

        Vérifie ton code php...
    3. Jules_2569 Auteur
      J'ai fais la vérification, au niveau de PDO j'ai vérifier ce qu'il fallait. Je n'ai pas de message d'erreur
      1. jordane45 Modérateur
        As tu également indiqué le mode de fetch par défaut ? il serait bien de le mettre sur FETCH_ASSOC ( comme dans le code du lien que je t'ai donné).
        Ensuite, remontre nous une capture écran de ton ajax (onglet REPONSE) qu'on voit ce que ton code retourne...
        Il serait bien également de nous remontrer le code php de ton fichier items.php ... car je pense que tu n'y as pas mis la bonne requête.
    5. Jules_2569 Auteur
      la page de connexion : 

      <?php

//session_start();

//On commence par activer l'affichage des erreurs PHP
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

/* DATABASE CONFIGURATION */
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'test');


function getDB() 
{
 $dbhost=DB_SERVER;
 $dbuser=DB_USERNAME;
 $dbpass=DB_PASSWORD;
 $dbname=DB_DATABASE;
  try {
 $bdd = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); 
    $bdd->exec("set names utf8");
    $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $bdd->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
    // $bdd->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_OBJ);
    return $bdd;
  } catch (PDOException $e) {
    echo 'Connection failed: ' . $e->getMessage();
    exit;
  }
}
?>


      Voici le code de la page items.php 

       <?php 
require "../inc/connexion.php";

//connexion à la bdd
$bdd = getDB();


if(isset($_POST['search'])){
   $search = $_POST['search'];
   $query = "SELECT id_items , prix_ht, as value,  item as label  FROM items WHERE item like'%".$search."%'";   

   try{
    $requete = $bdd -> prepare($query) ;   
    $requete->execute() ;
  //var_dump($requete);
    $response= $requete->fetchAll(); // on stocke le resultat dans un array
 

  }catch(Exception $e){
    // en cas d'erreur :
     $response = " Erreur ! ".$e->getMessage();
  
  }
  echo json_encode($response);
 // var_dump($response);
  exit;
}


      Le fichier Ajax 

         
  <script  >
        $( function() {
          
          $( "#autocompletei" ).autocomplete({
            source: function( request, response ) {
              
              $.ajax({
                url: "<?php echo URLSITE;?>/fetch/Items.php",
                type: 'post',
                dataType: "json",
                data: {
                  search: request.term 
                },
                success: function( data ) {
                  response( data );
                }
              });
            },
            select: function (event, ui) {
                $('#autocompletei').val(ui.item.label); // display the selected text
                $('#id_items').val(ui.item.id_items); // save selected id to input
                $('#prix_ht').val(ui.item.value); // save selected id to input
               
                return false;
              }
            });
          
        });
        function split( val ) {
          return val.split( /,\s*/ );
        }
        function extractLast( term ) {
          return split( term ).pop();
        }
      </script>


      1. Jules_2569 Auteur
        après il y a aussi peut-être une confusion comme le champs dans la table items s'apelle aussi item.
        1. jordane45 Modérateur
          Donc...
          le code de ton fichier items.php ... n'est pas celui que ton code utilise.
          Il semble que ton script ajax (côté JS) appelle le fichier Items.php (avec un I majuscule )
          Et puis.. si c'était réellement le "bon" que tu nous montres.. ce n'est pas possible car tu devrais avoir une erreur...
          Ta requête 
           "SELECT id_items , prix_ht, as value,  item as label  FROM items WHERE item like'%".$search."%'";

          ne peut pas marcher !
          Tu n'a qu'a la tester directement dans ta bdd (via phpmyadmin) en remplacer le $search par une "vraie valeur" pour t'en rendre compte...
          Je maintiens donc que tu ne nous montres pas le bon fichier !
          1. Jules_2569 Auteur
            J'ai un un seul fichier Items.php, pourtant je t’assure que ça fonctionne. C'est vrai que dans phpmyadmin j'ai le message ci-dessous :

            1. jordane45 Modérateur
              ben oui, ta requête est fausse...
              A changer par 
              $query = "SELECT id_items , prix_ht as value,  item as label  FROM items WHERE item like'%".$search."%'";


              Quoi qu'il en soit, ton ajax n'appelle pas le bon fichier...
              Donc soit tu ne modifies pas le bon....
              Soit tu ne pousses pas tes modifs sur le bon serveur
              Y'a pas de magie ... soit tu changes le bon fichier.. soit ça ne marchera jamais !
          2. Jules_2569 Auteur




            1. jordane45 Modérateur
              Vu que ton fichier se trouve dans le même répertoire
              change 
              url: "<?php echo URLSITE;?>/fetch/Items.php",

              par 
              url: "Items.php",


              et pense bien à vider le cache de ton navigateur avant de rééssayer.
            2. jordane45 Modérateur
              @jordane45persoo je viens de tester 
              <!Doctype html>
<html>
  <head>
    <title>TEST</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="jquery-3.5.1.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="modal-body">
      <div class="form-group">
        <label>item:</label>
        <input type="text" class="form-control" id="autocompletei" name="item" value="">
        <input type="text" class="form-control" id="id_items" name="id_items">
      </div>        
      <div class="form-group">
        <label>Prix HT:</label>
        <input type="number" class="form-control" id="prix_ht" name="prix_ht" value="">
      </div> 
    </div>  
      
    
    
    <script type="text/javascript">
    $( function() {
          
          $( "#autocompletei" ).autocomplete({
            source: function( request, response ) {
              
              $.ajax({
                url: "Items.php",
                type: 'post',
                dataType: "json",
                data: {
                  search: request.term 
                },
                success: function( data ) {
                  response( data );
                }
              });
            },
            select: function (event, ui) {
                console.log('UI',ui.item);
                $('#autocompletei').val(ui.item.label); // display the selected text
                $('#prix_ht').val(ui.item.value); // save selected id to input
                $('#id_items').val(ui.item.id_items); // save selected id to input
                return false;
              }
            });
          
        });
       
    </script>
  </body>
</html>

              avec, comme code pour le php Items.php (n'ayant pas ta bdd.. j'ai juste généré un array qui devrait correspondre à ce que ta requête retourne...) 
              <?php

$response = array();
$response[] = array("id_items"=>1,"value"=>9,"label"=>"test");
$response[] = array("id_items"=>2,"value"=>7,"label"=>"test 2");

echo json_encode($response);
exit;

          Discussions similaires

          java script error in the main process
          ceciel2307

          3 réponses
          Javascript Arrondi à 2 chiffres après la virgule
          jeremy

          14 réponses
          javascript arrondi après la virgule
          cap

          4 réponses
          Pb d'arrondi en javascript
          Sabi

          3 réponses
          Arrondir nombre Math.round
          ohklik

          1 réponse