Actualiser un prix automatiquement suivant la selection d'un poids

Actualiser un prix automatiquement suivant la selection d'un poids - HTML/CSS - Programmation

Marsh Posté le 24-02-2010 à 12:39:26    

Salut à tous
 
voilà la fin de mon formulaire pour commencer :

Code :
  1. <label for="conditionnement"><strong>Conditionnement : </strong></label>
  2.     <select name="conditionnement" id="conditionnement">
  3.      <option value="70">70 g</option>
  4.      <option value="130">130 g</option>
  5.      <option value="230">230 g</option>
  6.     </select>
  7.     <label><strong>Quantité : </strong></label><input type="text" name="quantite" value="1" size="3" />
  8.     <?php
  9.     if ($_POST['conditionnement']==70)
  10.     prix=2;
  11.     elseif ($_POST['conditionnement']==130)
  12.     prix=4;
  13.     elseif ($_POST['conditionnement']==230)
  14.     prix=5;
  15.     ?>
  16.     <strong>Prix : </strong><?php echo prix; ?> &euro;
  17.     <input type="submit" name="123" value="Ajouter au Panier" />
  18.     </form>


 
Je voudrais donc en java actualiser le prix automatiquement après que le client est changé le conditionnement du produit sans actualiser la page, mais je ne sais pas du tous comment faire en java, pourriez vous m'aider en m'indiquant quel fonction utiliser? merci de votre aide.

Reply

Marsh Posté le 24-02-2010 à 12:39:26   

Reply

Marsh Posté le 24-02-2010 à 13:31:55    

Java ou Javascript ? Java : ce n'est pas la bonne cat...
 
Javascript : appliquer un "onchange" au select, qui appelle une fonction Javascript.
type onchange="RefreshPrice(this.value)" et dans RefreshPrice un document.getElementbyId('...')

Message cité 1 fois

---------------
NewsletTux - outil de mailing list en PHP MySQL
Reply

Marsh Posté le 24-02-2010 à 16:09:29    

NewsletTux a écrit :

Java ou Javascript ? Java : ce n'est pas la bonne cat...
 
Javascript : appliquer un "onchange" au select, qui appelle une fonction Javascript.
type onchange="RefreshPrice(this.value)" et dans RefreshPrice un document.getElementbyId('...')


oui un Javascript désolé.
 
Je vais essayer de regarder ta piste. Merci

Reply

Marsh Posté le 24-02-2010 à 16:55:15    

Bon j'ai trouvé un petit script simpa :

Code :
  1. // Au départ la valeur est a 2
  2. <input type="text" id="input1" value="2" readonly="readonly" />
  3. // Quand on clique sur le bouton on la multiplie par 2
  4. <input type="button" value="Multiplier par 2" onclick="javascript:document.getElementById('input1').value=document.getElementById('input1').value*2;" />


 
Donc si je l'adapte à moi sa donnerait çà :

Code :
  1. <select name="conditionnement" id="conditionnement" onclick="javascript:document.getElementById('prix-<?php echo $produits_donnees['id']; ?>').value=<?php echo $prix; ?>">


 
Mais sans tester je sais que ça ne marchera pas car la variable $prix n'existe plus une fois la page exécute, alors comment faire?
Je pourais bien modifier la valeur des <select> mais j'ai besoin de connaitre le poids aussi, se qui serait bien c'est d'avoir un value2="" mais je pense pas que sa soit possible. Si vous avez une solution. merci


Message édité par hppp le 24-02-2010 à 16:57:07
Reply

Marsh Posté le 24-02-2010 à 18:11:37    

Rien compris ton histoire avec les selects, pour le reste tu peux déclarer une variable Javascript quand ta page est créée et lui affecter une valeur générée par PHP, comme ca tu peux t'en resservir plus tard. Ou alors si tu veux pas la variable Javascript, tu peux faire une balise input de type hidden mais bon ca revient au meme en moins pratique.
 
Ex pour un seul produit, à l'arrache:

Code :
  1. <script>
  2.     var prixUnitaire = <?php echo le prix unitaire?>;
  4.     function updatePrix(source, destID) {
  5.          document.getElementById('destID').value = source.options[source.selectedIndex].value * prixUnitaire;
  6.     }
  7. </script>
  8. ...
  9. <select name="conditionnement" id="conditionnement" onclick="javascript:updatePrix(this,IDDuTrucQuiAfficheLePrix);"> ... </select>


Après si t'as plein de produits, utilise un tableau au lieu d'une seule variable.

Message cité 1 fois

---------------
C'était vraiment très intéressant.
Reply

Marsh Posté le 24-02-2010 à 20:01:51    

lasnoufle a écrit :

Rien compris ton histoire avec les selects, pour le reste tu peux déclarer une variable Javascript quand ta page est créée et lui affecter une valeur générée par PHP, comme ca tu peux t'en resservir plus tard. Ou alors si tu veux pas la variable Javascript, tu peux faire une balise input de type hidden mais bon ca revient au meme en moins pratique.
 
Ex pour un seul produit, à l'arrache:

Code :
  1. <script>
  2.     var prixUnitaire = <?php echo le prix unitaire?>;
  4.     function updatePrix(source, destID) {
  5.          document.getElementById('destID').value = source.options[source.selectedIndex].value * prixUnitaire;
  6.     }
  7. </script>
  8. ...
  9. <select name="conditionnement" id="conditionnement" onclick="javascript:updatePrix(this,IDDuTrucQuiAfficheLePrix);"> ... </select>


Après si t'as plein de produits, utilise un tableau au lieu d'une seule variable.


 
Déjà merci pour ton aide.
Après j'ai essayé de faire ça mais comme je n'ai jamais fais de javascript j'ai un peut de mal :

Code :
  1. <script>
  2. var ttc = new Array(Array);
  3. ttc[1] = new Array(Array);
  5.  ttc[1][70]='1.3';
  6.  ttc[1][130]='2.5';
  7.  ttc[1][230]='5.2';
  9. function updatePrix(source, destID) {
  10.     document.getElementById('destID').value = ttc[1][source.options[source.selectedIndex].value];
  11. }
  12. </script>
  14.     <label for="conditionnement"><strong>Conditionnement : </strong></label>
  15.     <select name="conditionnement" id="conditionnement" onclick="javascript:updatePrix(this,prix-1);" >
  17.        <option value="70">70 g</option>
  18.        <option value="130">130 g</option>
  19.        <option value="230">230 g</option>
  20.       </select>
  21.     </p>
  22.     <p><label><strong>Quantité : </strong></label><input type="text" name="quantite" value="1" size="3" /></p>
  23.     <p id="prix-1"><strong>Prix : </strong>0 &euro;</p>


 
Sa ne marche pas mais je ne comprends pas à quoi sert source.options[source.selectedIndex].value ? merci

Reply

Marsh Posté le 24-02-2010 à 22:59:53    

Alors voyons voir.
 
Pour source.options[source.selectedIndex].value, c'est en fait très facile:
- source, tu l'as passé en argument, c'est ton élement <select>,
- source.options[] c'est un tableau contenant toutes les <option> du <select>, premier index à 0, et dans l'ordre où ils sont sur ta page,
- source.selectedIndex c'est une propriété du <select> qui donne l'index de l'option actuellement sélectionnée,
- source.options[source.selectedIndex] t'amène donc à l'élément <option> actuellement sélectionné,
- le .value te fait récupérer sa valeur.
 
Maintenant, rapide correction.
En fait t'as à la fois un prix en fonction du conditionnement, plus une quantité.
Le plus simple dans ton cas, c'est probablement de caser le prix directement dans l'attribut "value" de tes options. Du coup, meme pas besoin de te trimballer le tableau.
Après, la quantité fait un peu chier, faut vérifier que c'est bien un nombre. Mais finalement c'est pas si casse couilles que ca vu que je suppose que c'est censé etre que des entiers positifs.
Ensuite, j'ai déplacé le ID "prix-1" vu que c'est pas tout ton <p> que tu veux rafraichir, sinon tu vas perdre le reste de ton texte.
Enfin, le parametre destID que tu passes à la fonction est censé etre une chaine de caractères -> délimitée par des quotes.

Code :
  1. <script>
  2. // expression régulière pour tester si une chaine de caractères est un entier positif - pas sur de moi là
  3. var RETestPositiveInteger = \d*$/;
  5. function updatePrix(source, quantite, destID) {
  6.  // D'abord, vérifier que la quantité est bien un nombre
  7.  if (RETestPositiveInteger.test(quantite)) {
  8.   // Pas de quotes autour de destID ici, c'est un de tes paramètres, et c'est déjà (normalement) une chaine de catactères.  
  9.   document.getElementById(destID).innerHTML = (source.options[source.selectedIndex].value * quantite) + " &euro;";
  10.  }
  11.  else {
  12.   document.getElementById(destID).innerHTML = "Quantite invalide";
  13.  }
  14. }
  15. </script>
  17.     <label for="conditionnement"><strong>Conditionnement : </strong></label>
  18.     <select name="conditionnement" id="conditionnement" onclick="javascript:updatePrix(this,document.getElementById('quantite').value,'prix-1');" >
  20.        <option value="1.3">70 g</option>
  21.        <option value="2.5">130 g</option>
  22.        <option value="5.2">230 g</option>
  23.       </select>
  24.     </p>
  25.     <p><label><strong>Quantité : </strong></label><input type="text" id="quantite" value="1" size="3" /></p>
  26.     <p><strong>Prix : </strong><span id="prix-1">0 &euro;</span></p>


Bon c'est au pifomètre, dis moi si ca marche. Puis faudrait aussi ajouter quelque chose pour faire rafraichir le prix quand la quantité change dans la zone de texte.


---------------
C'était vraiment très intéressant.
Reply

Marsh Posté le 25-02-2010 à 08:59:52    

Bon j'essaye de comprendre vos codes en les modifiant etc ...
 
Mais j'ai un problème avec les fonctions, se code marche très bien :
 

Code :
  1. <select name="conditionnement" id="conditionnement" onclick="javascript:document.getElementById('prix-1').innerHTML=4;" >


 
il me change bien la valeur par 4 du prix
 

Code :
  1. <script>
  2.   function updatePrix() {
  3. document.getElementById('prix-1').innerHTML=4;
  4. }
  5. </script>
  7. <select name="conditionnement" id="conditionnement" onclick="javascript:updatePrix();" >


 
mais celui là ne marche pas et je ne comprends pas pourquoi.


Message édité par hppp le 25-02-2010 à 09:03:44
Reply

Marsh Posté le 25-02-2010 à 09:31:27    

il ne faut pas dire "ce code ne marche pas" mais "ce code retourne l'erreur XXXXXXX avec le message YYYYY".
Si tu es sous firefox, regarde dans la console Javascript l'erreur produite.
 
Si tu insères ton <script> tel quel, ça ne marche pas parce que à mon avis, quand le navigateur (qui lit le code source de haut en bas) arrive au <script>, il n'a encore rencontré aucun élément dont l'ID vaut "prix-1".
 
essaie de le mettre après le select, ou en fonction JS dans un fichier séparé (et appelé depuis le head de ta page)

Message cité 1 fois

---------------
NewsletTux - outil de mailing list en PHP MySQL
Reply

Marsh Posté le 25-02-2010 à 10:18:03    

Ok, la prochaine fois je regarderais la console de firefox.

 

Pour résoudre mon problème j'ai mi des paramètres :

 
Code :
  1. function updatePrix(conditionnement,IdProduit,destID) {
  2. document.getElementById(destID).innerHTML = tab[IdProduit][conditionnement];
  3. }
 

Maintenant que ça marche je voudrais mettre mes poids et prix dans un tableau mais quand je crée le tableau sans php pas de problème :

 
Code :
  1. <script>
  2. tab=new Array();
  3. tab[1]= new Array();
  4. tab[1][70]= 3;
  5. tab[1][130]= 5;
  6. tab[1][230]= 8;
  7. </script>
 

Mais quand je le crée avec php  :

 
Code :
  1. <script>
  2. tab=new Array();
  3. tab[<?php echo $produits_donnees['id']; ?>]= new Array();
  4. tab[<?php echo $produits_donnees['id']; ?>][70]= 3;
  5. tab[<?php echo $produits_donnees['id']; ?>][130]= 5;
  6. tab[<?php echo $produits_donnees['id']; ?>][230]= 8;
  7. </script>
 

- "<?php echo $produits_donnees['id']; ?>" vaut 1

 

firefox me dis Erreur : tab[1] is undefined

 

avec <a href="#" Onclick = "alert(tab[<?php echo $produits_donnees['id']; ?>][130]);"> Test</a>

 

Alors que dans le code source j'ai bien :

 
Code :
  1. tab=new Array();
  2. tab[1]= new Array();
  3. tab[1][70]= 3;
  4. tab[1][130]= 5;
  5. tab[1][230]= 8;
 

La je ne vois pas pourquoi ça ne marche pas? Merci encore de votre aide.


Message édité par hppp le 25-02-2010 à 10:19:03
Reply

Marsh Posté le 25-02-2010 à 10:18:03   

Reply

Marsh Posté le 25-02-2010 à 10:19:56    

NewsletTux a écrit :

il ne faut pas dire "ce code ne marche pas" mais "ce code retourne l'erreur XXXXXXX avec le message YYYYY".
Si tu es sous firefox, regarde dans la console Javascript l'erreur produite.
 
Si tu insères ton <script> tel quel, ça ne marche pas parce que à mon avis, quand le navigateur (qui lit le code source de haut en bas) arrive au <script>, il n'a encore rencontré aucun élément dont l'ID vaut "prix-1".
 
essaie de le mettre après le select, ou en fonction JS dans un fichier séparé (et appelé depuis le head de ta page)


La fonction n'est pas exécutée à sa création, c'est probablement pas un problème d'élément non présent...
Après, le code a l'air bon, donc effectivement, faut regarder l'erreur remontée, de préférence avec Firefox parce que sous IE c'est la plupart du temps incompréhensible.
Autre truc hppp, plutot que de lancer le rafraichissement sur onclick, fais le sur onchange plutot, c'est plus propre.


---------------
C'était vraiment très intéressant.
Reply

Marsh Posté le 25-02-2010 à 10:21:53    

Ton tableau, il est déclaré à quel moment dans ta page ? Il est bien global ?


---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
Reply

Marsh Posté le 25-02-2010 à 10:22:53    

T'es sur que ca marche avec le premier code?
Je dirais qu'il faut que tu rajoutes le mot clé "var" devant ta première affectation de tab, pour bien définir que c'est une variable globale:
var tab = new Array();


---------------
C'était vraiment très intéressant.
Reply

Marsh Posté le 25-02-2010 à 11:27:47    

donc j'ai changé par :
 

Code :
  1. ......
  2. <script>
  3. var tab=new Array();
  4. tab[<?php echo $produits_donnees['id']; ?>]= new Array();
  5. tab[<?php echo $produits_donnees['id']; ?>][70]= 3;
  6. tab[<?php echo $produits_donnees['id']; ?>][130]= 5;
  7. tab[<?php echo $produits_donnees['id']; ?>][230]= 8;
  8. </script>
  10. <a href="#" Onclick = "alert(tab[<?php echo $produits_donnees['id']; ?>][130]);"> Test</a>
  11. ......


 
voilà mon script en gros, je le met donc entre les <body>.
 
Mais j'ai toujours l'erreur : Erreur : tab[1] is undefined
 
JavaScript semble pas facile comme langage quand même.
 
Merci de votre aide

Message cité 1 fois
Reply

Marsh Posté le 25-02-2010 à 12:14:15    

hppp a écrit :

donc j'ai changé par :
 

Code :
  1. ......
  2. <script>
  3. var tab=new Array();
  4. tab[<?php echo $produits_donnees['id']; ?>]= new Array();
  5. tab[<?php echo $produits_donnees['id']; ?>][70]= 3;
  6. tab[<?php echo $produits_donnees['id']; ?>][130]= 5;
  7. tab[<?php echo $produits_donnees['id']; ?>][230]= 8;
  8. </script>
  10. <a href="#" Onclick = "alert(tab[<?php echo $produits_donnees['id']; ?>][130]);"> Test</a>
  11. ......


 
voilà mon script en gros, je le met donc entre les <body>.
 
Mais j'ai toujours l'erreur : Erreur : tab[1] is undefined
 
JavaScript semble pas facile comme langage quand même.
 
Merci de votre aide


Bizarre...
Dans ton navigateur, tu peux afficher le code source de la page (celui que tu recois après le passage de PHP). Menu View -> Source ou un truc dans le genre selon ton navigateur. Peux-tu regarder ca et vérifier que le <script> affecte bien des trucs à tab[1]?
 
Javascript ca pue puissance 1000, c'est pas très compliqué mais le fait que ca soit implémenté différemment par quasiment chaque navigateur fait que c'est la grosse merde. Du code optimisé pour IE marchera pas ou mal sous Firefox, et vice versa; la gestion de la mémoire est pourrie au possible quelque soit le navigateur, tu te retrouves souvent à faire de l'optimisation "technique", donc casse couilles et pas intéressant (pour moi), etc, etc.  
 
Par contre, les résultats que tu peux obtenir avec, ca dépote.


---------------
C'était vraiment très intéressant.
Reply

Marsh Posté le 25-02-2010 à 12:19:40    

Voilà le code source après le php :
 

Code :
  1. <script language="javascript">
  3. var tab=new Array();
  4. tab[1]= new Array();
  5. tab[1][70]= 3;
  6. tab[1][130]= 5;
  7. tab[1][230]= 8;
  9. </script>
  10. <p><a href="#" Onclick = "alert(tab[1][130]);"> Les Produits</a></p>


 
Et y a rien de mieux que le java alors? Merci

Message cité 1 fois
Reply

Marsh Posté le 25-02-2010 à 12:32:07    

hppp a écrit :

Voilà le code source après le php :

 
Code :
  1. <script language="javascript">
  3. var tab=new Array();
  4. tab[1]= new Array();
  5. tab[1][70]= 3;
  6. tab[1][130]= 5;
  7. tab[1][230]= 8;
  9. </script>
  10. <p><a href="#" Onclick = "alert(tab[1][130]);"> Les Produits</a></p>
 

Et y a rien de mieux que le java alors? Merci


Mwai c'est vraiment bizarre ton truc. A priori ca devrait marcher tranquille. Y'a un numéro de ligne avec ton erreur? Y a nulle part d'autre sur ta page ou tu essayes de taper dans le tableau?
Si c'est pas encore le cas, fais une page de test avec le minimum, juste ca dans une balise <body> et c'est tout, et regarde si ca plante toujours.
Je suppose que y'a pas moyen qu'on accède à ta page de test en live?

 

Et sinon, Java != Javascript, et pour faire des trucs coté client, je connais que Javascript. P'tetre Flash mais j'y connais rien.


Message édité par lasnoufle le 25-02-2010 à 12:32:30

---------------
C'était vraiment très intéressant.
Reply

Marsh Posté le 25-02-2010 à 12:46:28    

Bon sa marche dans une page à part donc je vais regarder pourquoi ça bug.
 
Merci encore.

Reply

Marsh Posté le 26-02-2010 à 12:03:03    

Bon, tous marche super bien, déjà merci mais j'ai un petit problème.
 
Sur certain calcule j'ai par exemple 8.3400000003 et je voudrais qu'il arrondisse au nombre supérieur donc 8.35 mais je ne sais pas comment faire en javascript.
 
Merci

Reply

Marsh Posté le 26-02-2010 à 15:27:41    

Roh bah quand meme, cherche un peu dans d'la doc, c'est facile à trouver.
Math.round(8.3400000003); te renverra 8.
Math.round(8.3400000003*100)/100; te renverra 8.34.


---------------
C'était vraiment très intéressant.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed