Discussion :

[franculo_caoulene]

Salut,

J'essaie d'utiliser le framework prototype 1.5 pour ajouter un évènement click à tous les checkbox de mon formulaire, si possible sans faire de boucle. Sinon je ne vois vraiment pas l'intérêt de prototype!

Malheureusement la seule chose que j'ai réussi à faire c'est ajouter un évènement à un élément précise grâce à son id. Ce qui implique que si je souhaite l'ajouter à tous les checkbox je dois faire une boucle.

Ce qui fonctionne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
Event.observe(document.getElementById('10DernieresBP2'), 'click', function(event) {
    alert("coucou");
});

Ce qui ne fonctionne pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//ne génère pas d'erreur mais aucune alerte n'apparaît
Event.observe(document.getElementsByTagName('10DernieresBP2'), 'click', function(event) {
    alert("coucou");
});
 
//retourne "element has no properties"
Event.observe('input', 'click', function(event) {
    alert("coucou");
});
 
//retourne "element has no properties"
Event.observe('input[type="checkbox"]', 'click', function(event) {
    alert("coucou");
});
 
//retourne "$("input[type=\"checkbox\"]") has no properties" is not a function
$$('input[type="checkbox"]').observe('click', function(event) {
    alert("coucou");
});
 
//retourne "$$("input[type=\"checkbox\"]") is not a function"
$$('input[type="checkbox"]').observe('click', function(event) {
    alert("coucou");
});

Donc est-ce possible? Si oui, comment?

Merci par avance pour vos réponses.

[SpaceFrog]

à l'ancienne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
var TabInputs =document.getElementsByTagName('input');
 
var TabChecks=new Array();
 
for (i=0;i<TabInputs.length;i++){
 if (TabInputs[i].type.toLowerCase()="checkbox"){TabCheck.push(TabInputs[i])}
}
 
for (j=0;j<TabChecks.length;j++){
TabChecks[i].onclick=function(){alert("coucou"};
}

[franculo_caoulene]

Nan mais j'aurais quand même voulu faire ça en une seule ligne, vu que l'appli utilise prototype...

Décidément j'accroche pas, je vois pas ce qu'on lui trouve, mais bon c'est pas le sujet.

[SpaceFrog]

A piori d'après ce que j'ai pu rechercher il faut passer par un turc du style ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var TabInputs =document.getElementsByTagName('input');
 
for (i=0;i<TabInputs.length;i++){
 if (TabInputs[i].type.toLowerCase()="checkbox"){Event.observe(TabInputs[i], 'click', function(event) {
    alert("coucou");
});}
}

[franculo_caoulene]

Justement ça n'a aucune intérêt! Avec jquery ça donne une ligne de mémoire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('input[type="checkbox"]').click(function() {
    alert("coucou");
});

Finalement je l'ai fait à l'ancienne...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
var tabInput = document.getElementsByTagName('input');
var tabCheck = new Array();
 
for (i=0;i<tabInput.length;i++) {
    if (tabInput[i].type.toLowerCase()=="checkbox"){tabCheck.push(tabInput[i])}
}
 
for (j=0;j<tabCheck.length;j++){
    tabCheck[j].onclick = function(){  
             alert("coucou");
        });
    };
}

Après deux/trois petites corrections

[el_teedee]

Salut,

j'ai lu cette discussion car je cherchais à faire en sorte que sur l'appui d'entrée quand le focus est sur un select, mon formulaire de recherche soit posté, mais pas n'importe quel submit.

Au début, j'ai fait un onkeypress= document.monForm.submit() sur le <select>, mais le submit en question n'était pas identifiable. En effet, ayant plusieurs boutons de type submit, le premier caché pour l'appui sur entrée dans des input type text, des boutons 'Ajouter', 'Supprimer', 'Nouvelle recherche', et 'Recherche', je veux que ce soit le bouton 'Recherche' qui soit l'auteur de la soumission, afin de retrouver dans l'url postée : &rechercheBouton=Recherche par exemple.

Le code ci dessous, fait une ligne (xD), et branche sur tous les <select>, une action sur l'appui de la touche Entrée

La version en une ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$A(document.getElementsByTagName("select")).each(function (leSelect) { Event.observe($(leSelect), "keydown", function(event){ if (event.keyCode == 13) { document.monForm.monBoutonSubmit.click(); } return false; }.bindAsEventListener($(leSelect)) ); }); }, false);

Maintenant la version compréhensible à la vue

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
Event.observe(window, "load", function(event){
$A(document.getElementsByTagName("select")).each(function (leSelect) {
	Event.observe($(leSelect), "keydown", function(event){
		if (event.keyCode == 13) {
			document.monForm.monBoutonSubmit.click();
		}
		return false;
		}.bindAsEventListener($(leSelect))
	);
});
 
}, false);

Ce code a été testé pour :

• Firefox 2.0.0.11
• IE 6
• IE 7
• Safari 3.0.3 For windows