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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Select + onchange] Recupérer la valeur de l'index précédent

IvanleFou

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:

Publicité

IvanleFou

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

flo850

moi je

tu dois pouvoir le faire en stockant l'index dans une variable globale

je vois que ca

Message cité 1 fois

anapajari

s/travail/glanding on hfr/gs;

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]

IvanleFou

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:

gatsu35

Blablaté par Harko

codé en 5 minutes à l'arrache :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function checkarticles() {
var form = document.getElementById("formulaire" );
var select = form.getElementsByTagName("select" );
var count = 0;
for (var i=0; i<select.length; i++) {
if (select[i].name=="article[]" ) count+=parseInt(select[i].value);
}
document.getElementById("total" ).innerHTML = count;
}
</script>
</head>
<body>
<form id="formulaire">
<select name="quinarienavoiravectoutca">
<option value="0"> Select qui n'est pas de type article</option>
<option value="40">ya rien a voir</option>
<option value="20">pas d'article</option>
<option value="25">DTC</option>
</select>
<select name="article[]" onchange="checkarticles()">
<option value="0"> </option>
<option value="40">Pouet</option>
<option value="20">Prout</option>
<option value="25">Caca</option>
</select>
<select name="article[]" onchange="checkarticles()">
<option value="0"> </option>
<option value="40">Pouet</option>
<option value="20">Prout</option>
<option value="25">Caca</option>
</select>
<select name="article[]" onchange="checkarticles()">
<option value="0"> </option>
<option value="40">Pouet</option>
<option value="20">Prout</option>
<option value="25">Caca</option>
</select>
<select name="article[]" onchange="checkarticles()">
<option value="0"> </option>
<option value="40">Pouet</option>
<option value="20">Prout</option>
<option value="25">Caca</option>
</select>
<strong>Total : <span id="total"></span></strong>
</form>
</body>
</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 :

function checkarticles() {
var timer1 = new Date().getTime();
var form = document.getElementById("formulaire" );
var select = form.getElementsByTagName("select" );
var count = 0;
for (var i=0; i<select.length; i++) {
if (select[i].name=="article[]" ) count+=parseInt(select[i].value);
}
document.getElementById("total" ).innerHTML = count;
var timer2 = new Date().getTime();
alert(timer2-timer1+"ms, "+select.length+" selects" );
}

gatsu35

Blablaté par Harko

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

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function checkarticles(obj) {
if (!obj) return; //on teste si l'objet est la
var total = document.getElementById("total" ); //on recupere l'element du total
if (total.innerHTML=="" ) total.innerHTML="0"; //on regarde s'il y a du texte dans le total, sinon par defaut c'est 0
var lastvalue = 0;
// on regarde si le select avec une ancienne valeur
if (obj.getAttribute('lastvalue')!=null) { //si le select a deja eu une ancienne valeur
lastvalue = obj.getAttribute('lastvalue'); //on la recupere sinon 0
}
// on fait une operation toute simple : total = total-anciennevaleur+nouvellevaleur;
total.innerHTML = parseInt(total.innerHTML)-parseInt(lastvalue)+parseInt(obj.value);
obj.setAttribute('lastvalue',obj.value); //on met la nouvelle valeur du select selectionne en tant qu'ancienne valeur;
}
</script>
</head>
<body>
<form id="formulaire">
<strong>Total : <span id="total"></span></strong><br>
<select name="article[]" onchange="checkarticles(this)">
<option value="0"> </option>
<option value="40">Pouet</option>
<option value="20">Prout</option>
<option value="25">Caca</option>
</select>
<select name="article[]" onchange="checkarticles(this)">
<option value="0"> </option>
<option value="40">Pouet</option>
<option value="20">Prout</option>
<option value="25">Caca</option>
</select>
<select name="article[]" onchange="checkarticles(this)">
<option value="0"> </option>
<option value="40">Pouet</option>
<option value="20">Prout</option>
<option value="25">Caca</option>
</select>
</form>
</body>
</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

IvanleFou

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:

gatsu35

Blablaté par Harko

j'ai dit tu peux jeter ma Première fonction à la poubelle (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
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 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function checkarticles(obj) {
if (!obj) return; //on teste si l'objet est la
var total = document.getElementById("total" ); //on recupere l'element du total
var temptotal = parseInt((document.all) ? total.innerText : total.textContent); //on recupere temptotal en string
if (!isFinite(temptotal)) temptotal = 0; //on teste si temptotal est bien un nombre
var value = parseInt(obj.value);
if (!isFinite(value)) value = 0; //on teste si value est bien un nombre
var lastvalue = 0;
// on regarde si le select avec une ancienne valeur
if (obj.getAttribute('lastvalue')!=null) { //si le select a deja eu une ancienne valeur
lastvalue = obj.getAttribute('lastvalue'); //on la recupere sinon 0
if (!isFinite(lastvalue)) lastvalue = 0;
}
// on fait une operation toute simple : total = total-anciennevaleur+nouvellevaleur;
//alert("'"+lastvalue+"','"+obj.value+"' - "+temptotal+","+parseInt(lastvalue)+","+parseInt(obj.value));
total.innerHTML = temptotal-lastvalue+value;
obj.setAttribute('lastvalue',obj.value); //on met la nouvelle valeur du select selectionne en tant qu'ancienne valeur;
}
</script>
</head>
<body>
<form id="formulaire">
<strong>Total : <span id="total">-5</span></strong><br>
<select name="article[]" onchange="checkarticles(this)">
<option value="0"> </option>
<option value="40">Pouet</option>
<option value="20">Prout</option>
<option value="25">Caca</option>
</select>
<select name="article[]" onchange="checkarticles(this)">
<option value="0"> </option>
<option value="40">Pouet</option>
<option value="20">Prout</option>
<option value="25">Caca</option>
</select>
<select name="article[]" onchange="checkarticles(this)">
<option value="0"> </option>
<option value="40">Pouet</option>
<option value="20">Prout</option>
<option value="25">Caca</option>
</select>
<select name="article[]" onchange="checkarticles(this)">
<option value="0"> </option>
<option value="40">Pouet</option>
<option value="20">Prout</option>
<option value="25">Caca</option>
</select>
</form>
</body>
</html>

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

IvanleFou

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

:hello:

Publicité

gatsu35

Blablaté par Harko

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

IvanleFou

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
recuperer l'id de la page en JS	onChange fonctionne sous Firefox mais pas IE...
récuperer le nom d une page	recuperer un xml dans un blob
[résolu] Pb de onChange (désolé)	Récupérer les valeurs d'un champ au nom variable
[résolu] SELECT défaillant ...	[Excel] Comment obtenir la dernière valeur ?
[Batch-dos] Récupérer nom session	Socket, recv, send et select qui ne marche pas
Plus de sujets relatifs à : [Select + onchange] Recupérer la valeur de l'index précédent

Page générée en 0.125 secondes