1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Liste déroulante et récupération du contenu dans un input

Résolu
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:

16 réponses

Réponse 1 / 16
jordane45
Messages postés
35417
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2022
 356
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 ?



0
jordane45
Messages postés
35417
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2022
 356
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 !!
0
Réponse 2 / 16
Utilisateur anonyme
2 mars 2017 à 11:29
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,
0
Réponse 3 / 16
jordane45
Messages postés
35417
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2022
 356
Modifié par jordane45 le 2/03/2017 à 12:17

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);

?>
0
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,
0
jordane45
Messages postés
35417
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2022
 356
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);

?>
0

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

Posez votre question
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,
0
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".
0
jordane45
Messages postés
35417
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2022
 356
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.
0
Réponse 7 / 16
Utilisateur anonyme
Modifié par dinolam le 2/03/2017 à 17:08
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);
0
jordane45
Messages postés
35417
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2022
 356
2 mars 2017 à 17:12
Tu as mis : 
elm = $('[name="ref"]').val();

hors .... où as tu mis l'input dont le name est "ref" ??
0
rekaia_3459
22 juil. 2019 à 18:54
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
0
Réponse 8 / 16
Utilisateur anonyme
Modifié par dinolam le 2/03/2017 à 17:37
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,
0
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.
0
jordane45
Messages postés
35417
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2022
 356
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"
0
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.
0
jordane45
Messages postés
35417
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2022
 356
2 mars 2017 à 18:53
Et que contient ton fichiet asp ???
0
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é.
0
jordane45
Messages postés
35417
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2022
 356
2 mars 2017 à 19:47
Alors.. pour eviter tout doute...
COLLE NOUS LES CODES COMPLETS de tes fichiers
0
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é.
0
jordane45
Messages postés
35417
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2022
 356
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).
0
Réponse 13 / 16
Utilisateur anonyme
6 mars 2017 à 11:46
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);
0
jordane45
Messages postés
35417
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2022
 356
6 mars 2017 à 12:56
... 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"; ??
0
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.
0
jordane45
Messages postés
35417
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2022
 356
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 ....
0
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
0
jordane45
Messages postés
35417
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2022
 356
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";
0
Réponse 16 / 16
Utilisateur anonyme
6 mars 2017 à 14:51
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,
0

sur les mêmes thèmes