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

Résolu
Jules_2569 Messages postés 52 Date d'inscription   Statut Membre Dernière intervention   -  
Jules_2569 Messages postés 52 Date d'inscription   Statut Membre Dernière intervention   -
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

Réponse 1 / 10
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 2 / 10
Jules_2569 Messages postés 52 Date d'inscription   Statut Membre Dernière intervention  
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
As tu vidé le cache de ton navigateur ?
0
Jules_2569 Messages postés 52 Date d'inscription   Statut Membre Dernière intervention   > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > Jules_2569 Messages postés 52 Date d'inscription   Statut Membre Dernière intervention  
 
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
Réponse 3 / 10
Jules_2569 Messages postés 52 Date d'inscription   Statut Membre Dernière intervention  
 




0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
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
Réponse 4 / 10
Jules_2569 Messages postés 52 Date d'inscription   Statut Membre Dernière intervention  
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 5 / 10
Jules_2569 Messages postés 52 Date d'inscription   Statut Membre Dernière intervention  
 
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
Réponse 6 / 10
Jules_2569 Messages postés 52 Date d'inscription   Statut Membre Dernière intervention  
 
après il y a aussi peut-être une confusion comme le champs dans la table items s'apelle aussi item.
0
Réponse 7 / 10
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 8 / 10
Jules_2569 Messages postés 52 Date d'inscription   Statut Membre Dernière intervention  
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 9 / 10
Jules_2569 Messages postés 52 Date d'inscription   Statut Membre Dernière intervention  
 




0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
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
Réponse 10 / 10
Jules_2569 Messages postés 52 Date d'inscription   Statut Membre Dernière intervention  
 
Merci
0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
MySQL error in file: /engine/classes/mysql.php at line 53
mela30100 -
jordane45 -

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

12 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
ALERT en php
snoopy -
appkech -

14 réponses