Liste déroulante et récupération du contenu dans un input [Résolu]

Question

Liste déroulante et récupération du contenu dans un input [Résolu]

Signaler

Utilisateur anonyme - Modifié par dinolam le 2/03/2017 à 10:58
rekaia_3459 - 22 juil. 2019 à 18:54

Bonjour à tous,

J'ai souci concernant ma liste déroulante.
J'aimerais récupérer une référence dans ma liste déroulante et l'injecter dans input de type (hidden) et en fonction de la référence obtenu afficher son prix grâce à une requête pour afficher le prix du produit.

Merci par avance !

Code ci-dessous :


// article.php
<form>
       <select name="reference" id="reference">
              <option value="">Choisir votre ref :</option>
              <option value="ref1">Ref 1</option>
              <option value="ref2">Ref 2</option>
              <option value="ref3">Ref 3</option>
              <option value="ref4">Ref 4</option>
              <option value="ref5">Ref 5</option>
        </select>
        <button type="submit">Ajouter</button> 
 <input type="hidden" name="ref" value="">
</form>

<?php
      $ref = $_POST["ref"];

      $q = array('ref'=>$ref);
      $sql = "SELECT * FROM article WHERE ref = :ref";
      $req = $db->prepare($sql);
      $req->execute($q) or die(print_r($req->errorInfo()));
      $row = $req->fetch();

if (isset($ref)) {
?>
<div id="prix"><?=$row["prix"];?></div>
<?php } ?>

// Récuperation de la valeur du select et l'ajout dans input type hidden
function ajoutInputValues() {
 var ref = $("#reference").val();
 $('[name="ref"]').val(ref);
}
$('#reference').on('change', ajoutInputValues, function(){
        var ref = $('[name="ref"]').val();

 $.ajax({
  url: 'article.php',
  type: 'post',
  data: 'ref='+ref,
  success: function(reponse) {
  }
 });
});

A voir également:

Input liste déroulante
Javascript liste déroulante onchange - Meilleures réponses
Liste déroulante javascript - Meilleures réponses
Liste déroulante avec selected ✓ - Forum - PHP
Afficher une liste déroulante en cliquant sur un input - Forum - Javascript / DHTML
Grisé un champ en fonction d'une liste déroulante - Forum - Javascript / DHTML
Affichage dans un input une valeur d'une liste deroulante ✓ - Forum - Javascript / DHTML
Liste déroulante php base de données ✓ - Forum - PHP

16 réponses

Répondre Posez votre question

jordane45 · Answer 1 · 2017-03-02T10:59:33+0100

Réponse 1 / 16

jordane45

Messages postés: 32192
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 27 avril 2021

346
2 mars 2017 à 10:59

Bonjour,
Peux tu nous rappeler ce qu'est sensé faire l'ajax présent dans ton code ?

et puis..pourquoi vouloir passer par un input hidden alors que tu as déjà l'info dans le select ?

Signaler

jordane45

Messages postés: 32192
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 27 avril 2021

346
2 mars 2017 à 11:01

attend.. je viens de voir un truc ...
Le code que tu nous montres ... c'est celui de "article.php" ???
Et dans ton AJAX tu fais appel à "article.php" aussi ???..... là y'a un souci !!

Utilisateur anonyme · Answer 2 · 2017-03-02T11:29:01+0100

Bonjour @jordane45,

Merci d'avoir répondu à mon post.
Oui je fais appel à mon fichier article.php.
J'aimerais rester sur la même page avec le formulaire. Le prix de l'article est caché par défaut mais en fonction du choix de select je récupère la référence de l'article pour aller chercher son prix et l'afficher instantanément sans réchargement.

Cdlt,

jordane45 · Answer 3 · 2017-03-02T12:16:05+0100

en fonction du choix de select je récupère la référence de l'article pour aller chercher son prix et l'afficher instantanément sans réchargement

c'est le rôle de l'AJAX !
Et si tu ne veux aucun rechargement ... pourquoi avoir mis un "submit" ??

Et puis.. où as tu mis les balises SCRIPT ???

Bref..
Voici ton code corrigé.
Nb : Il te faut bien DEUX fichiers . un "article.php" qui contient ta liste déroulange et un autre que j'ai nommé : articles.ajx.php

Voici leurs codes :
Fichier : article.php
(ne pas oublier d'y inclure la librairie JQUERY !!! )

<select name="reference" id="reference" onchange="actualise_prix(this.value)">
  <option value="">Choisir votre ref :</option>
  <option value="ref1">Ref 1</option>
  <option value="ref2">Ref 2</option>
  <option value="ref3">Ref 3</option>
  <option value="ref4">Ref 4</option>
  <option value="ref5">Ref 5</option>
</select>

<div id="prix"></div>

<script type="text/javascript">
 function actualise_prix(elm){
   var urlAjx = "articles.ajx.php";
   var datas = {ref:elm};
    $.ajax({ 
      type: "POST",
      url: urlAjx,
      data: datas,
      dataType: "json",
      success: function(reponse){
         // ici on actualise le prix en fonction du retour du php
         console.log(reponse);// le temps des tests
          if(typeof(reponse.prix)!="undefined" && reponse.prix!=null){
            $("#prix").html(reponse.prix);
          }
       },
      error:function(jqXHR, textStatus){
        var error = jqXHR.responseText;
        alert('error :' + error);
         
        }
     }); 
 
 }
</script>

articles.ajx.php

<?php

// inclure le fichier de connexion à la bdd
require_once "cnxBdd.php"; // à changer par TON fichier de connexion à la bdd !!

//récupération PROPRE des variables
$ref = !empty($_POST["ref"]) ? $_POST["ref"] : NULL;

if($ref){
  $q = array('ref'=>$ref);
  $sql = "SELECT * FROM article WHERE ref = :ref";
  try{
    $req = $db->prepare($sql);
    $req->execute($q)
    $result = $req->fetch();
  }catch(Exception $e){
    $result = "Error ! ".$e->getMessage();
  }
}else{
  $result = "No REF !!";
}

//on renvoie les donnees sous format json
echo json_encode($result);

?>

Utilisateur anonyme · Answer 4 · 2017-03-02T12:32:51+0100

Réponse 4 / 16

Utilisateur anonyme
2 mars 2017 à 12:32

Pour répondre à tes questions : j'ai mis les valises script dans le même fichier article.php. C'est après que je me suis rendu compte je ne pouvais pas faire un traitement ajax sur un même fichier.

Pour le submit, j'aurais besoin de valider le formulaire pour ajouter l'article au panier.

Je vais essayer ton code et je reviendrai vers toi.

Merci encore !

Cdlt,

Signaler

jordane45

Messages postés: 32192
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 27 avril 2021

346
2 mars 2017 à 12:53

Pour le submit, j'aurais besoin de valider le formulaire pour ajouter l'article au panier.

Ca aussi tu pourrais le faire en Ajax .. ça serait plus propre.....

tu ajoutes un bouton qui appellera une fonction "ajouterArticle()" ...
puis tu feras un code comme celui là :

côté javascript :

 function ajouterArticle(){
  var reference = $("#reference").val();
  var urlAjx = "ajouterarticle.ajx.php";
   var datas = {ref:reference};
    $.ajax({ 
      type: "POST",
      url: urlAjx,
      data: datas,
      dataType: "json",
      success: function(reponse){
         //ici on traite la reponse si on le souhaite
         console.log(reponse);
       },
      error:function(jqXHR, textStatus){
        var error = jqXHR.responseText;
        alert('error :' + error);
         
        }
     }); 
 }

et un fichier PHP pour le traitement : ajouterarticle.ajx.php

<?php

// inclure le fichier de connexion à la bdd
require_once "cnxBdd.php"; // à changer par TON fichier de connexion à la bdd !!

//récupération PROPRE des variables
$ref = !empty($_POST["ref"]) ? $_POST["ref"] : NULL;

if($ref){
  $q = array('ref'=>$ref);
  $sql = "INSERT INTO panier (ref) VALUES(:ref)";
  try{
    $req = $db->prepare($sql);
    $result =$req->execute($q)
  }catch(Exception $e){
    $result = "Error ! ".$e->getMessage();
  }
}else{
  $result = "No REF !!";
}

//on renvoie les donnees sous format json
echo json_encode($result);

?>

Utilisateur anonyme · Answer 5 · 2017-03-02T13:41:41+0100

Réponse 5 / 16

Utilisateur anonyme
2 mars 2017 à 13:41

Ok c'est parfait !
Je vais faire le test et je dirai quoi.

Cdlt,

Utilisateur anonyme · Answer 6 · 2017-03-02T16:07:16+0100

Réponse 6 / 16

Utilisateur anonyme
Modifié par dinolam le 2/03/2017 à 16:59

J'ai une erreur dès que je recharge la page. Ça me renvoie l'alert No REF !! avant même de sélectionner mon champ.

!!! J'ai corrigé le problème d'alert au chargement de la page mais je ne récupère toujours pas la ref. En sélectionnant une option j'ai le message : "No REF".

Signaler

jordane45

Messages postés: 32192
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 27 avril 2021

346
2 mars 2017 à 16:59

ce n'est pas une erreur ....
Par contre ce n'est pas normal.
As tu d'autres choses (comme code...) dans ta page ??
Montre nous le code COMPLET de tes fichiers.

Utilisateur anonyme · Answer 7 · 2017-03-02T17:03:19+0100

J'ai besoin de récupérer la valeur de l'input hidden : $('[name="ref"]').val(); dans le formulaire car elle changera en fonction d'autres paramètres que je n'ai pas encore traité.


// liste déroulante
<select name="reference" id="reference">
  <option value="">Choisir votre ref :</option>
  <option value="ref1">Ref 1</option>
  <option value="ref2">Ref 2</option>
  <option value="ref3">Ref 3</option>
  <option value="ref4">Ref 4</option>
  <option value="ref5">Ref 5</option>
</select>

<div id="prix"></div>


// Appel Ajax
function actualise_infos() {
        var elm, urlAjx = "article_ajax.php", datas = {ref:elm};
 elm = $('[name="ref"]').val();
 $.ajax({ 
  type: "POST",
  url: urlAjx,
         data: datas,
  dataType: "json",
  success: function(reponse){
   console.log(reponse);
   if(typeof(reponse.prix)!="undefined" && reponse.prix!=null){
    $("#prix").html(reponse.prix);
   }
  },
  error:function(jqXHR, textStatus) {
   var error = jqXHR.responseText;
   alert('error :' + error);
  }
 }); 
}
$('#reference').on('change', actualise_infos);


// fichier: article_ajax.php
// inclure le fichier de connexion à la bdd
require_once "cnxBdd.php"; 

//récupération PROPRE des variables
$ref = !empty($_POST["ref"]) ? $_POST["ref"] : NULL;

if($ref){
  $q = array('ref'=>$ref);
  $sql = "SELECT * FROM article WHERE ref = :ref";
  try{
    $req = $db->prepare($sql);
    $req->execute($q)
    $result = $req->fetch();
  }catch(Exception $e){
    $result = "Error ! ".$e->getMessage();
  }
}else{
  $result = "No REF !!";
}
//on renvoie les donnees sous format json
echo json_encode($result);

Tu as mis :
elm = $('[name="ref"]').val();

hors .... où as tu mis l'input dont le name est "ref" ??
je suis debutante et j'ai presque le mm prblm alors je me suis coincé ou mettre input de name "ref" et comment elle va connaitre ou mettre le prix aidez moi svp

Utilisateur anonyme · Answer 8 · 2017-03-02T17:35:36+0100

C'est dans le code que j'ai mis au tout début et la fonction javascript qui lui affecte la réf :


// formulaire
<form>
       <select name="reference" id="reference">
              <option value="">Choisir votre ref :</option>
              <option value="ref1">Ref 1</option>
              <option value="ref2">Ref 2</option>
              <option value="ref3">Ref 3</option>
              <option value="ref4">Ref 4</option>
              <option value="ref5">Ref 5</option>
        </select>
        <button type="submit">Ajouter</button> 
        <input type="hidden" name="ref" value="">
</form>


// Récuperation de la valeur du select et l'ajout dans input type hidden
function ajoutInputValues() {
     var ref = $("#reference").val();
     $('[name="ref"]').val(ref);
}
$('#reference').on('change', ajoutInputValues);

En fait ce n'ai pas la valeur de mon select que je veux récupérer immédiatement mais plutôt cette même qui est rajoutée sur l'input hidden : $('[name="ref"]'). Car cette ref changera en fonction d'autres paramètre que je n'ai pas encore traité. J'ai prévu de rajouter d'autres options. En fonction de ces options la ref pourrait changer (ref personnalisée). Le prix que je veux afficher pour une réf normale n'est pas le même pour une réf personnalisée.

Cdlt,

Utilisateur anonyme · Answer 9 · 2017-03-02T17:53:50+0100

Réponse 9 / 16

Utilisateur anonyme
2 mars 2017 à 17:53

C'est bon je récupère le prix. Mais il me l'affiche toujours dans l'alert : alert('error :' + error);

Pourtant il n'y a pas d'erreur. Il ne l'affiche dans la div qui a l'id prix.

Signaler

jordane45

Messages postés: 32192
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 27 avril 2021

346
2 mars 2017 à 18:17

Normal.. vu que tu as en parti modifié le code ... les données ne sont plus envoyées.
Tu as écris ceci :

        var elm, urlAjx = "article_ajax.php", datas = {ref:elm};
 elm = $('[name="ref"]').val();
 $.ajax({ 
  type: "POST",
  url: urlAjx,
         data: datas,

Ne vois tu pas l'erreur ??

Un indice....... ça concerne la variable "datas"

Utilisateur anonyme · Answer 10 · 2017-03-02T18:28:05+0100

Réponse 10 / 16

Utilisateur anonyme
2 mars 2017 à 18:28

Oui je vois. Je viens de corriger cette erreur. Maintenant j'ai le code en ordre :


var elm;
elm = $('[name="produit_ref"]').val();
var datas = {ref:elm};
var urlAjx = "include/plaque_ajax.asp";

J'affiche maintenant ma div prix sous format json : { "ref": 15,4 }. Je veux récupérer juste le chiffre : 15,4.

Signaler

jordane45

Messages postés: 32192
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 27 avril 2021

346
2 mars 2017 à 18:53

Et que contient ton fichiet asp ???

Utilisateur anonyme · Answer 11 · 2017-03-02T19:12:27+0100

Réponse 11 / 16

Utilisateur anonyme
2 mars 2017 à 19:12

Le fichier asp est une erreur de copie. Je l'utilise pour une autre partie de l'application. Donc c'est le ficher php précédemment utilisé.

Signaler

jordane45

Messages postés: 32192
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 27 avril 2021

346
2 mars 2017 à 19:47

Alors.. pour eviter tout doute...
COLLE NOUS LES CODES COMPLETS de tes fichiers

Utilisateur anonyme · Answer 12 · 2017-03-03T15:28:21+0100

Réponse 12 / 16

Utilisateur anonyme
3 mars 2017 à 15:28

Les codes ce sont ceux que j'ai mis précédemment. La partie ajout panier je ne l'ai pas encore traité.

Signaler

jordane45

Messages postés: 32192
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 27 avril 2021

346
3 mars 2017 à 17:28

Tu ne nous as mis que de "bouts" de code ....
Je te demande de mettre l' INTEGRALITE du code (tel qu'écrit dans tes fichiers ... sans séparation sur le forum... ) utilisé (et modifié suite à nos différents échanges).

Utilisateur anonyme · Answer 13 · 2017-03-06T11:46:10+0100

Bonjour,

Désolé pour le retard.
Voici le code complet de tout ce qu'on vu depuis le début.


// article.php
<form>
       <select name="reference" id="reference">
              <option value="">Choisir votre ref :</option>
              <option value="ref1">Ref 1</option>
              <option value="ref2">Ref 2</option>
              <option value="ref3">Ref 3</option>
              <option value="ref4">Ref 4</option>
              <option value="ref5">Ref 5</option>
        </select>
        <button type="submit">Ajouter</button> 
        <input type="hidden" name="ref" value="">
</form>
<div id="prix"></div>


// Récuperation de la valeur du select et l'ajout dans input type hidden
function ajoutInputValues() {
     var ref = $("#reference").val();
     $('[name="ref"]').val(ref);
}
$('#reference').on('change', ajoutInputValues);

// Appel Ajax
function actualise_infos() {
 var elm, urlAjx = "article_ajax.php;
 elm = $('[name="ref"]').val();
 var datas = {ref:elm};
 $.ajax({ 
  type: "POST",
  url: urlAjx,
  data: datas,
  dataType: "json",
  success: function(reponse){
   console.log(reponse);
   if(typeof(reponse.prix)!="undefined" && reponse.prix!=null){
    $("#prix").html(reponse.prix);
   }
  },
  error:function(jqXHR, textStatus) {
   var error = jqXHR.responseText;
   alert('error :' + error);
  }
 }); 
}
$('#reference').on('change', actualise_infos);


// fichier: article_ajax.php
// inclure le fichier de connexion à la bdd
require_once "cnxBdd.php"; 

//récupération PROPRE des variables
$ref = !empty($_POST["ref"]) ? $_POST["ref"] : NULL;

if($ref){
  $q = array('ref'=>$ref);
  $sql = "SELECT * FROM article WHERE ref = :ref";
  try{
    $req = $db->prepare($sql);
    $req->execute($q)
    $result = $req->fetch();
  }catch(Exception $e){
    $result = "Error ! ".$e->getMessage();
  }
}else{
  $result = "No REF !!";
}
//on renvoie les donnees sous format json
echo json_encode($result);

... tu ne comprends toujours pas ....
je ne sais vraiment pas comment te le demander autrement ......

Je réessaye ....
Que contient ton fichier article.php ( la TOTALITE du fichier ... EN UN SEUL MORCEAU !!!! )

De plus ...
Comment se nomme ton fichier de connexion à la bdd ? "cnxBdd.php"; ??

Utilisateur anonyme · Answer 14 · 2017-03-06T13:58:58+0100

Réponse 14 / 16

Utilisateur anonyme
6 mars 2017 à 13:58

Je ne peux pas mettre tout le contenu de mon fichier car il s'agit d'un projet d'entreprise. Je n'ai pas droit de divulguer l'intégralité de mon fichier.

Merci pour la compréhension.

Signaler

jordane45

Messages postés: 32192
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 27 avril 2021

346
6 mars 2017 à 14:10

Tu crois vraiment qu'un peu de html/php va poser problème ??
Et puis... il te suffit de remplacer les données "sensibles" par des *** si vraiment il y en a....

De toutes façons.. tu ne m'as toujours pas répondu sur le nom de ton fichier de connexion à la bdd ....

Utilisateur anonyme · Answer 15 · 2017-03-06T14:45:11+0100

Réponse 15 / 16

Utilisateur anonyme
6 mars 2017 à 14:45

Mon fichier de connexion à la base de données se nomme connexion_bd.php

Signaler

jordane45

Messages postés: 32192
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 27 avril 2021

346
6 mars 2017 à 15:39

Mon fichier de connexion à la base de données se nomme connexion_bd.php

Dans ce cas .... pourquoi n'as tu pas changé le nom du fichier dans :

// inclure le fichier de connexion à la bdd
require_once "cnxBdd.php";

Utilisateur anonyme · Answer 16 · 2017-03-06T14:51:34+0100

Concernant mon fichier article.php il y a trop de contenu. Je ne pense pas que l'intégralité de ce fichier puisse aider les gens sur ce forum. Car le sujet de mon post concerne qu'une petite partie de mon fichier. C'est pour ça que j'ai extrait la partie concernée pour que ça puisse aider d'autres personnes qui auront le même problème.

Il y a beaucoup de données sensibles je ne pourrais pas divulguer l'intégralité de son contenu.

Cdlt,

Votre réponse