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

Résolu/Fermé
Jules_2569 Messages postés 52 Date d'inscription vendredi 13 décembre 2019 Statut Membre Dernière intervention 28 juillet 2020 - Modifié le 20 mai 2020 à 16:23
Jules_2569 Messages postés 52 Date d'inscription vendredi 13 décembre 2019 Statut Membre Dernière intervention 28 juillet 2020 - 22 mai 2020 à 16:03
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;
}



A voir également:

10 réponses

jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 4 719
20 mai 2020 à 16:43
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 Messages postés 52 Date d'inscription vendredi 13 décembre 2019 Statut Membre Dernière intervention 28 juillet 2020
20 mai 2020 à 17:37
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
0
jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 4 719
20 mai 2020 à 17:47
As tu vidé le cache de ton navigateur ?
0
Jules_2569 Messages postés 52 Date d'inscription vendredi 13 décembre 2019 Statut Membre Dernière intervention 28 juillet 2020 > jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024
Modifié le 20 mai 2020 à 17:59
Je 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
0
jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 4 719 > Jules_2569 Messages postés 52 Date d'inscription vendredi 13 décembre 2019 Statut Membre Dernière intervention 28 juillet 2020
20 mai 2020 à 18:01
Peux 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


0
Jules_2569 Messages postés 52 Date d'inscription vendredi 13 décembre 2019 Statut Membre Dernière intervention 28 juillet 2020
Modifié le 20 mai 2020 à 18:17




0
jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 4 719
20 mai 2020 à 19:56
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...
0
jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 4 719 > jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024
20 mai 2020 à 19:57
Et vu que tu fais du PDO, suis les consignes données ici : https://forums.commentcamarche.net/forum/affich-37584941-php-pdo-gerer-les-erreurs
0
Jules_2569 Messages postés 52 Date d'inscription vendredi 13 décembre 2019 Statut Membre Dernière intervention 28 juillet 2020
22 mai 2020 à 12:18
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
0
jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 4 719
22 mai 2020 à 12:25
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.
0

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

Posez votre question
Jules_2569 Messages postés 52 Date d'inscription vendredi 13 décembre 2019 Statut Membre Dernière intervention 28 juillet 2020
Modifié le 22 mai 2020 à 12:53
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> 



0
Jules_2569 Messages postés 52 Date d'inscription vendredi 13 décembre 2019 Statut Membre Dernière intervention 28 juillet 2020
22 mai 2020 à 13:01
après il y a aussi peut-être une confusion comme le champs dans la table items s'apelle aussi item.
0
jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 4 719
22 mai 2020 à 14:16
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 !
0
Jules_2569 Messages postés 52 Date d'inscription vendredi 13 décembre 2019 Statut Membre Dernière intervention 28 juillet 2020
22 mai 2020 à 15:16
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 :

0
jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 4 719
22 mai 2020 à 15:19
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 !
0
Jules_2569 Messages postés 52 Date d'inscription vendredi 13 décembre 2019 Statut Membre Dernière intervention 28 juillet 2020
22 mai 2020 à 15:37




0
jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 4 719
22 mai 2020 à 15:42
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.
0
jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 4 719 > jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024
22 mai 2020 à 16:00
persoo 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;
0
Jules_2569 Messages postés 52 Date d'inscription vendredi 13 décembre 2019 Statut Membre Dernière intervention 28 juillet 2020
22 mai 2020 à 16:03
Merci
0