[Select + onchange] Recupérer la valeur de l'index précédent

Recupérer la valeur de l'index précédent [Select + onchange] - HTML/CSS - Programmation

Marsh Posté le 04-07-2006 à 12:44:49    

Bonjour,
 
J'ai plusieurs select contenant chacun une liste d'articles et je veux faire le total du cout de chaque article (c'est comme une facture).
 
J'ai 2 solutions pour faire la somme: soit tout recalculer a chaque fois, soit ajouter/retrancher au total le prix de l'article en question. J'ai choisi la 2eme solution car ca devrait etre moins lourd si il y a beaucoup d'article.
 
Le probleme survient lorsque l'utilisateur enleve un article, c'est a dire qu'il choisit l'option "vide" dans le select. A ce moment j'appelle ma fonction qui fait la mise a jour mais j'ai le nouveau index (avec this.options[this.selectedIndex].value) et je ne sais plus comment retrouver l'index de l'objet qui etait selectionné juste avant.
 
La seul solution que je vois c'est de faire une variable par select et d'y stocké la valeur de l'index en cours. Je la mets a jour une fois que j'ai fait mon calcul. Vous voyez une autre solution? :??:  
 
Merci pour vous conseils :jap:

Reply

Marsh Posté le 04-07-2006 à 12:44:49   

Reply

Marsh Posté le 04-07-2006 à 23:20:55    

Soit elle est vraiment naze ma question soit elle est vraiment difficile [:noxauror]

Reply

Marsh Posté le 04-07-2006 à 23:29:27    

tu dois pouvoir le faire en stockant l'index dans une variable globale  
 
je vois que ca  

Message cité 1 fois
Reply

Marsh Posté le 05-07-2006 à 09:25:10    

flo850 a écrit :

tu dois pouvoir le faire en stockant l'index dans une variable globale  
je vois que ca


c'est exactement ce qu'il expliquait [:mlc]
 
Si l'idée de la variable te plait pas, tu peux aussi la faire DOM-Staïlle, en rajoutant un attribut à ton select qui contiendrait l'ancienne valeur... Mais bon ça revient strictement au même [:spamafote]

Reply

Marsh Posté le 05-07-2006 à 11:11:07    

Non l'idee de la variable ne me deplait pas, au contraire. Je demandais a tout hasard car je connais tres peu le javascript et je me disais que peut etre il existait un attribut pour faire cela et que je ne connaitrais pas :)  
 
J'ai fait avec la variable est ca marche bien, merci pour votre confirmation :hello:  
 
 :jap:

Reply

Marsh Posté le 05-07-2006 à 20:58:11    

codé en 5 minutes à l'arrache :  

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <script type="text/javascript">
  7. function checkarticles() {
  8.  var form = document.getElementById("formulaire" );
  9.  var select = form.getElementsByTagName("select" );
  10.  var count = 0;
  11.  for (var i=0; i<select.length; i++) {
  12.   if (select[i].name=="article[]" ) count+=parseInt(select[i].value);
  13.  }
  14.  document.getElementById("total" ).innerHTML = count;
  15. }
  18. </script>
  19. </head>
  21. <body>
  23. <form id="formulaire">
  24. <select name="quinarienavoiravectoutca">
  25. <option value="0"> Select qui n'est pas de type article</option>
  26. <option value="40">ya rien a voir</option>
  27. <option value="20">pas d'article</option>
  28. <option value="25">DTC</option>
  29. </select>
  33. <select name="article[]" onchange="checkarticles()">
  34. <option value="0"> </option>
  35. <option value="40">Pouet</option>
  36. <option value="20">Prout</option>
  37. <option value="25">Caca</option>
  38. </select>
  39. <select name="article[]" onchange="checkarticles()">
  40. <option value="0"> </option>
  41. <option value="40">Pouet</option>
  42. <option value="20">Prout</option>
  43. <option value="25">Caca</option>
  44. </select>
  45. <select name="article[]" onchange="checkarticles()">
  46. <option value="0"> </option>
  47. <option value="40">Pouet</option>
  48. <option value="20">Prout</option>
  49. <option value="25">Caca</option>
  50. </select>
  51. <select name="article[]" onchange="checkarticles()">
  52. <option value="0"> </option>
  53. <option value="40">Pouet</option>
  54. <option value="20">Prout</option>
  55. <option value="25">Caca</option>
  56. </select>
  57. <strong>Total : <span id="total"></span></strong>
  60. </form>
  61. </body>
  62. </html>


 
Tu peux mettre autant d'articles que tu veux, mais je ne pense pas que tu atteindra les 100 articles dans ta page, et même avec 100 articles, on est très loin de ramer.
 
et ce que tu cherche toi à faire est possible mais super chiant pour l'utilisateur, et ne risque de fonctionner que si l'utilisateur utilise sa souris (j'ai déjà l'algo en tête). Mais ce n'est pas forcément super top.
Alors qu'une simple boucle ca suffit
 
sinon avec la version de test du fichier :  
 
Tests : sous IE avec 780 selects il faut 500ms pour executer la fonctions :|
 
sous FF, moins de 100 ms :|
 
la fonction dans sa version de test :  

Code :
  1. function checkarticles() {
  2.  var timer1 = new Date().getTime();
  3.  var form = document.getElementById("formulaire" );
  4.  var select = form.getElementsByTagName("select" );
  5.  var count = 0;
  6.  for (var i=0; i<select.length; i++) {
  7.   if (select[i].name=="article[]" ) count+=parseInt(select[i].value);
  8.  }
  9.  document.getElementById("total" ).innerHTML = count;
  10.  var timer2 = new Date().getTime();
  11.  alert(timer2-timer1+"ms, "+select.length+" selects" );
  12. }

Reply

Marsh Posté le 05-07-2006 à 21:13:07    

Mais sinon pour répondre à ta question (du coup mon code au dessus tu peux le jeter) :  

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <script type="text/javascript">
  7. function checkarticles(obj) {
  8.  if (!obj) return; //on teste si l'objet est la
  9.  var total = document.getElementById("total" ); //on recupere l'element du total
  10.  if (total.innerHTML=="" ) total.innerHTML="0"; //on regarde s'il y a du texte dans le total, sinon par defaut c'est 0
  11.  var lastvalue = 0;
  12.  // on regarde si le select avec une ancienne valeur
  13.  if (obj.getAttribute('lastvalue')!=null) { //si le select a deja eu une ancienne valeur
  14.   lastvalue = obj.getAttribute('lastvalue'); //on la recupere sinon 0
  15.  }
  16.  // on fait une operation toute simple : total = total-anciennevaleur+nouvellevaleur;
  17.  total.innerHTML = parseInt(total.innerHTML)-parseInt(lastvalue)+parseInt(obj.value);
  18.  obj.setAttribute('lastvalue',obj.value); //on met la nouvelle valeur du select selectionne en tant qu'ancienne valeur;
  19. }
  22. </script>
  23. </head>
  25. <body>
  27. <form id="formulaire">
  28. <strong>Total : <span id="total"></span></strong><br>
  30. <select name="article[]" onchange="checkarticles(this)">
  31. <option value="0"> </option>
  32. <option value="40">Pouet</option>
  33. <option value="20">Prout</option>
  34. <option value="25">Caca</option>
  35. </select>
  36. <select name="article[]" onchange="checkarticles(this)">
  37. <option value="0"> </option>
  38. <option value="40">Pouet</option>
  39. <option value="20">Prout</option>
  40. <option value="25">Caca</option>
  41. </select>
  42. <select name="article[]" onchange="checkarticles(this)">
  43. <option value="0"> </option>
  44. <option value="40">Pouet</option>
  45. <option value="20">Prout</option>
  46. <option value="25">Caca</option>
  47. </select>
  48. </form>
  49. </body>
  50. </html>


 
explication : Je pars du principe que par défaut l'ancienne valeur d'un select c'est zero ou par défaut la valeur selectionee au chargement de la page, ou si tu l'as initialisé dans la page c'est :  
<select lastvalue="valeurselectionne">
 
du coup lorsque tu changes la valeur du select, tu as l'ancienne valeur, et la nouvelle valeur sélectionnée va devenir ancienne valeur à son tour. entre temps on fait l'operation simple decrite dans les commentaires du code.


Message édité par gatsu35 le 05-07-2006 à 21:13:35
Reply

Marsh Posté le 05-07-2006 à 21:18:31    

:)  
 
Sympa la maniere de selectionner tous les select les uns apres les autres (pour vous ca doit paraitre trivial mais comme je l'ai dit je m'y connais tres peu en javascript et je ne connaissais pas cette methode).
 
Je vais tester les 2 versions.
 
Merci Gatsu35. :jap:

Reply

Marsh Posté le 05-07-2006 à 21:53:04    

j'ai dit tu peux jeter ma Première fonction à la poubelle :o (celle qui va checker tous les selects)
 
Ici c'est la solution que tu recherches, avoir une ancienne valeur, là tu peux mettre 15000 selects c'est ultra rapide :o
Tiens j'ai amélioré le bouzin, parce que sous Opera, ce con me rendait pas forcément des nombres malgré un parseInt, cette fois-ci je recupère vraiment des nombres.

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <script type="text/javascript">
  7. function checkarticles(obj) {
  8.  if (!obj) return; //on teste si l'objet est la
  9.  var total = document.getElementById("total" ); //on recupere l'element du total
  10.  var temptotal = parseInt((document.all) ? total.innerText : total.textContent); //on recupere temptotal en string
  11.  if (!isFinite(temptotal)) temptotal = 0; //on teste si temptotal est bien un nombre
  12.  var value = parseInt(obj.value);
  13.  if (!isFinite(value)) value = 0; //on teste si value est bien un nombre
  14.  var lastvalue = 0;
  15.  // on regarde si le select avec une ancienne valeur
  16.  if (obj.getAttribute('lastvalue')!=null) { //si le select a deja eu une ancienne valeur
  17.   lastvalue = obj.getAttribute('lastvalue'); //on la recupere sinon 0
  18.   if (!isFinite(lastvalue)) lastvalue = 0;
  19.  }
  20.  // on fait une operation toute simple : total = total-anciennevaleur+nouvellevaleur;
  21.  //alert("'"+lastvalue+"','"+obj.value+"' - "+temptotal+","+parseInt(lastvalue)+","+parseInt(obj.value));
  22.  total.innerHTML = temptotal-lastvalue+value;
  23.  obj.setAttribute('lastvalue',obj.value); //on met la nouvelle valeur du select selectionne en tant qu'ancienne valeur;
  24. }
  26. </script>
  27. </head>
  29. <body>
  31. <form id="formulaire">
  32. <strong>Total : <span id="total">-5</span></strong><br>
  34. <select name="article[]" onchange="checkarticles(this)">
  35. <option value="0"> </option>
  36. <option value="40">Pouet</option>
  37. <option value="20">Prout</option>
  38. <option value="25">Caca</option>
  39. </select>
  41. <select name="article[]" onchange="checkarticles(this)">
  42. <option value="0"> </option>
  43. <option value="40">Pouet</option>
  44. <option value="20">Prout</option>
  45. <option value="25">Caca</option>
  46. </select>
  47. <select name="article[]" onchange="checkarticles(this)">
  48. <option value="0"> </option>
  49. <option value="40">Pouet</option>
  50. <option value="20">Prout</option>
  51. <option value="25">Caca</option>
  52. </select>
  54. <select name="article[]" onchange="checkarticles(this)">
  55. <option value="0"> </option>
  56. <option value="40">Pouet</option>
  57. <option value="20">Prout</option>
  58. <option value="25">Caca</option>
  59. </select>
  61. </form>
  62. </body>
  63. </html>


Message édité par gatsu35 le 05-07-2006 à 21:54:37
Reply

Marsh Posté le 07-07-2006 à 12:25:21    

Je me suis servi de ta premiere fonction (en la modifiant un peu) pour un autre script :bounce:  :bounce:  
 
 :hello:

Reply

Marsh Posté le 07-07-2006 à 12:25:21   

Reply

Marsh Posté le 07-07-2006 à 12:59:01    

tu fais ce que tu veux mais la deuxieme répond à ton besoin et est beaucoup plus propre que la premiere

Reply

Marsh Posté le 07-07-2006 à 13:05:30    

Oui mais le contexte n'est pas le meme la ou je l'ai utilisé et il y va tres bien.
 
Ta 2eme version je m'y attaque ce soir pour la mettre dans le script qui est a l'origine de ce topic ;)

Reply

Sujets relatifs:

Leave a Replay

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