11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Onchange sur plusieurs select

Bonjour,
Toujours aussi nul en javascript Smiley sweatdrop , je cherche à écrire une fonction unique à utiliser sur plusieurs select.

La fonction js:
function initonchange() { 
var vosprojets = document.getElementByName('vosprojets');
	vosprojets.onchange = function() {
	window.location.href=this.value;
	}
}
window.onload = initonchange;


Le code: 

<select name="vosprojets" id="vosprojetsParticuliers">
<option value="1.txt">- PARTICULIERS -</option>
<option value="2.txt">Utiliser votre compte</option>
<option value="3.txt">Emprunter</option>
</select>

<select name="vosprojets" id="vosprojetsProfessionnels">
<option value="4.txt">- PROFESSIONNELS -</option>
<option value="5.txt">Artisans</option>
<option value="6.txt">Commer&ccedil;ants</option>
</select>


Quelqu'un aurait une idée, ou une piste à me proposer?

Je précise qu'il n'y aura pas de submit... Volonté du client!
Modifié par speedlab (19 Jan 2010 - 16:53)
getElementsByName retourne une collection comme l'indique le s 

var vosprojets = document.getElementByName('vosprojets'); 
var i=0;
while (vosprojets[i++]){ 
    vosprojets[i-1].onchange = function() { 
    window.location.href=this.value; 
    } 
 }

Modifié par SpaceFrog (19 Jan 2010 - 15:43)
Bonjour SpaceFrog,

Cela voudrait donc dire qu'il manque un -s dans la déclaration de ta fonction?

La fonction deviendrait donc ce qui suit?

function initonchange() { 
var vosprojets = document.getElementsByName('vosprojets');
var i=0;
while (vosprojets[i++]){
vosprojets[i-1].onchange = function() {window.location.href=this.value;}
}


... le tout sans changer l'attribut name de mes select?

Désolé pour toutes ces questions, je préfèrerais être sûr de bien comprendre.
non dans ta fonction tu essayais d'attribuer directement la fonction à une collection d'objets ...

il faut parcourir la collection (dans la boucle while) pour attribuer la fonction à chacun des éléments de cette collection
Mmmh...
C'est bien ce que je craignais, je n'ai pas compris.
Si je francise ta fonction, je la comprends comme ça:

vosprojets correspond à la collection des objets dont le nom est 'vosprojets'. La variable i est initialisée à 0.
Tant que je parcours vosprojets(1, 2, 3...), j'affecte à vosprojets(0, 1, 2...) la fonction qui charge la page avec la valeur de l'option.

Ok, c'est pas très français, mais l'idée est là, non?

Parce que je dois faire fonctionner ça avec IE 6 (si, si, pas le choix), et ça ne fonctionne pas...

Merci de tes explications supplémentaires Smiley confused 
<script type="text/javascript">
function initonchange() {  
var vosprojets = document.getElementsByName('vosprojets'); 
var i=0; 
while (vosprojets[i++]){ 
vosprojets[i-1].onchange = function() {alert(this.value)} 
}
}
</script>

</head>

<body onload="initonchange()">
<select name="vosprojets" id="vosprojetsParticuliers"> 
<option value="1.txt">- PARTICULIERS -</option> 
<option value="2.txt">Utiliser votre compte</option> 
<option value="3.txt">Emprunter</option> 
</select> 
 
<select name="vosprojets" id="vosprojetsProfessionnels"> 
<option value="4.txt">- PROFESSIONNELS -</option> 
<option value="5.txt">Artisans</option> 
<option value="6.txt">Commer&ccedil;ants</option> 
</select> 
</body>

</html>


Testé sous IE 6

à la place de alert(this.value) mets 
self.location.assing(this.value)
Ah bha merci, ça va mieux...
Je ne connaissais pas self.location.assign(this.value), j'en apprends tous les jours Smiley ravi !

Un grand merci pour ton aide
oui on voit souvent:

self.location.href=url


Il vaut mieux passer par la méthode dédiée d'attribution d'url à la fenetre que de modifier la propriété.

En soi le résultat est le même mais la modification de la propriété supposer ensuite l'interprétation de la propriété tandis que l'attribution avec assing se fait directement
Modifié par SpaceFrog (19 Jan 2010 - 17:09)
Re,
Une question supplémentaire (ou complémentaire?):

La fonction javascript est: 

function initonchange() {
	var vosprojets = document.getElementsByName("vosprojets");
	var i=0;
	while (vosprojets[i++]){
		vosprojets[i-1].onchange = function() {
			self.location.assign(this.value);
			}
		}
}


Avec cette fonction, la console d'erreur de Web Developper me donne l'avertissement suivant:

reference to undefined property vosprojets[++]
Ligne4

C'est donc la ligne: while (vosprojets[i++]){

As-tu une idée d'où cet avertissement peut venir?
Ce n'est pas une erreur bloquante en soi ...
le test while verifie si l'objet[i++] existe
lorsque l'indice dépasse la longueur de la collection -1 il est normal que cela fasse reference à un objet qui n'existe pas

si tu tiens à eviter cette "fausse erreur" 

function initonchange() { 
    var vosprojets = document.getElementsByName("vosprojets"); 
    var vpl=vosprojets.length; 
    for(i=0;i<vpl;i++){ 
        vosprojets[i ].onchange = function() { 
            self.location.assign(this.value); 
            } 
        } 
}

C'est juste un poil moins optimisé
Modifié par SpaceFrog (20 Jan 2010 - 15:03)
Mmh merci,
Je crois que j'étais en train de trouver d'où ça venait!

Pffiou, encore pas mal de progrès à faire en js, moi Smiley sweatdrop
Sujet clos
Aller à