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

Utilisateur anonyme - 2 mars 2017 à 10:22 - Dernière réponse : jordane45 22901 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 octobre 2018 Dernière intervention
- 6 mars 2017 à 15:39
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) {
}
});
});
Afficher la suite 

Votre réponse

27 réponses

jordane45 22901 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 octobre 2018 Dernière intervention - 2 mars 2017 à 10:59
0
Merci
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 ?



jordane45 22901 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 octobre 2018 Dernière intervention - 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 !!
Commenter la réponse de jordane45
Utilisateur anonyme - 2 mars 2017 à 11:29
0
Merci
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,
Commenter la réponse de Utilisateur anonyme
jordane45 22901 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 octobre 2018 Dernière intervention - Modifié par jordane45 le 2/03/2017 à 12:17
0
Merci

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

?>

Commenter la réponse de jordane45
Utilisateur anonyme - 2 mars 2017 à 12:32
0
Merci
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,
jordane45 22901 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 octobre 2018 Dernière intervention - 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);

?>

Commenter la réponse de Utilisateur anonyme
Utilisateur anonyme - 2 mars 2017 à 13:41
0
Merci
Ok c'est parfait !
Je vais faire le test et je dirai quoi.

Cdlt,
Commenter la réponse de Utilisateur anonyme
0
Merci
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".
jordane45 22901 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 octobre 2018 Dernière intervention - 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.
Commenter la réponse de Utilisateur anonyme
0
Merci
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);
jordane45 22901 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 octobre 2018 Dernière intervention - 2 mars 2017 à 17:12
Tu as mis :
elm = $('[name="ref"]').val();

hors .... où as tu mis l'input dont le name est "ref" ??
Commenter la réponse de Utilisateur anonyme
0
Merci
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,
Commenter la réponse de Utilisateur anonyme
Utilisateur anonyme - 2 mars 2017 à 17:53
0
Merci
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.
jordane45 22901 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 octobre 2018 Dernière intervention - 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"
Commenter la réponse de Utilisateur anonyme
Utilisateur anonyme - 2 mars 2017 à 18:28
0
Merci
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.
jordane45 22901 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 octobre 2018 Dernière intervention - 2 mars 2017 à 18:53
Et que contient ton fichiet asp ???
Commenter la réponse de Utilisateur anonyme
Utilisateur anonyme - 2 mars 2017 à 19:12
0
Merci
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é.
jordane45 22901 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 octobre 2018 Dernière intervention - 2 mars 2017 à 19:47
Alors.. pour eviter tout doute...
COLLE NOUS LES CODES COMPLETS de tes fichiers
Commenter la réponse de Utilisateur anonyme
Utilisateur anonyme - 3 mars 2017 à 15:28
0
Merci
Les codes ce sont ceux que j'ai mis précédemment. La partie ajout panier je ne l'ai pas encore traité.
jordane45 22901 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 octobre 2018 Dernière intervention - 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).
Commenter la réponse de Utilisateur anonyme
Utilisateur anonyme - 6 mars 2017 à 11:46
0
Merci
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);
jordane45 22901 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 octobre 2018 Dernière intervention - 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"; ??
Commenter la réponse de Utilisateur anonyme
Utilisateur anonyme - 6 mars 2017 à 13:58
0
Merci
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.
jordane45 22901 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 octobre 2018 Dernière intervention - 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 ....
Commenter la réponse de Utilisateur anonyme
Utilisateur anonyme - 6 mars 2017 à 14:45
0
Merci
Mon fichier de connexion à la base de données se nomme connexion_bd.php
jordane45 22901 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 octobre 2018 Dernière intervention - 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"; 
Commenter la réponse de Utilisateur anonyme
Utilisateur anonyme - 6 mars 2017 à 14:51
0
Merci
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,
Commenter la réponse de Utilisateur anonyme

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.