Récupérer les valeurs de plusieurs boutons

28 févr. 2007, 20:13

Salut,

Je voudrais récupérer dans un javascript différentes valeurs suivant le bouton sur lequel on clique. Mais je sèche là. Avec ce code

Code : Tout sélectionner

<script language="javascript">
function maFonction(){
var couleur=document.getElementById('bouton').value;
}
</script>

Code : Tout sélectionner

<html>
<body>
<td><input type="image" id="bouton" border="0" src="images/rose.gif" value="rose" name="bouton" onClick="maFonction()"></td>
<td><input type="image" id="bouton2" border="0" src="images/rouge.gif" value="rouge" name="bouton" onClick="maFonction()"></td>
</body>
</html>

je ne récupère que la première valeur.
Si j'utilise des champs cachés, c'est pareil. Si j'utilise un formulaire avec le meme bouton submit idem. Toute aide sera la bienvenue, merci.

01 mars 2007, 09:29

Salut à tous !

Imaginez une salle de classe avec au premier rang Bernard Dupond, à côté de lui Bernard Dupond, de l'autre côté Bernard Dupond, derrière lui, sur la deuxième rangée de table, de gauche à droite : Bernard Dupond, Bernard Dupond, Bernard Dupond et Bernard Dupond, au fond, toujours près du radiateur, c'est Bernard Dupond, à ses côtés, Bernard Dupond et celui qui regarde par la fenêtre, devinez qui ? Bernard Dupond voyons…

Imaginez maintenant que la maîtresse (toujours aussi sexy la maîtresse…) se retourne et lance : « Allez Bernard, au tableau ! ». Aussitôt les élèves de s'écrier : « Lequel, m'dame !? ». « Eh bien Bernard Dupond, voyons ! ».

De deux choses l'une : soit un Bernard Dupond — le plus proche — se lève et les autres — puisqu'un Bernard Dupond est déjà en route — le laisse faire, soit même aucun Bernard Dupond ne se lève, tous troublés, dans l'expectative.

Qu'on se le dise une bonne fois pour toutes, parce que ça me fait mal au cœur de trouver partout cette erreur idiote et irrespectueuse pour tous les enfants DOM que nous créons : « id », ça signifie « IDENTIFIANT », « ce qui identifie. Et le propre de l'identification, c'est l'UNICITÉ.

Aussi, si tous vos éléments s'appellent Bernard Dupond, comment voulez-vous que la maîtresse (toujours aussi sexy mon Firefox…) les *identifie* ? Comment voulez-vous qu'elle s'adresse à eux PERSONNELLEMENT ?… Non, devant ce problème, elle prend le premier, au premier rang, juste devant son bureau, et tant pis pour les autres.

Non, un objet peut être dans la même class (sic) qu'un autre, mais son nom (name), son identifiant (id), il doit l'avoir en propre. Personne d'autres que lui ne doit porter son identifiant (son nom). Et si vous avez des doublons, parce qu'une photo est toujours une photo, faites comme dans les maternelles : ajoutez la lettre du nom : Marie A et Marie G.

Enfin débrouillez-vous, quoi, d'autant qu'un des gros avantages de l'informatique (on s'en plaint tous les jours… (sic)), c'est d'être très pointilleux : pour lui, « Bernard DuponD » et « Bernard DuponT » sont deux personnes bien distinctes. Mais arrêtez, je vous en supplie, arrêtez d'appeler tous vos éléments par le même nom !

Voilà, c'est dit,

Bien à vous tous,

Phil

01 mars 2007, 09:41

Affirmatif on ne donne pas le même identifiant à plusieurs éléments.
en cas d'éxécution suivant la syntaxe utilisée ce sera soit le premier rencontré soit le dernier. pour ton cas il faut mettre ta couleur en variable de ton html

<html>
<body>
<td><input type="image" id="bouton" border="0" src="images/rose.gif" name="bouton" onClick="maFonction('rose')"></td>
<td><input type="image" id="bouton" border="0" src="images/rouge.gif" name="bouton" onClick="maFonction('rouge')"></td>
</body>
</html>

et récupérer cette valeur dans ta fonction

<script language="javascript">
function maFonction(couleur){
//Ici code exploitant la couleur pour tes besoins
}
</script>

01 mars 2007, 09:46

je ne l'ai pas fait sur ton code ci-dessus mais il faut évidemment mettre id=bouton1 , bouton2 etc..

01 mars 2007, 09:47

@Phil93

Ben alors, t'en veux aux Bernard Dupont et tu voudraient les appeler Bernard Dupond

@bravegars

Si tu n'as pas saisi, passes ta page au validateur html et le robot te donnera la réponse

01 mars 2007, 11:38

Hello,

Bien sûr que mes id sont différents c'est juste que j'ai tapé le code trop vite. J'en suis toujours au même point. Je ne récupère que la première valeur.

En fait je ne sais pas comment récupérer le click suivant les boutons, par quel moyen propre à javascript. Je sais bien récupérer le true si on clique sur un bouton, et false si on clique sur un autre, ça c'est simple. Mais quand on a 30 boutons c'est une autre histoire. Je précise que ce ne sont pas des boutons submit mais des boutons images. Bon aller je retourne à mes recherches.

Merci pour vos commentaires, et ce cours très instructif.

01 mars 2007, 12:01

Hello,

Bien sûr que mes id sont différents c'est juste que j'ai tapé le code trop vite. J'en suis toujours au même point. Je ne récupère que la première valeur.

Ben voui, mais si tu mets des erreurs dans ton code en nous demandant pourquoi ça marche pas, difficile de te répondre avec pertinence

.

En fait je ne sais pas comment récupérer le click suivant les boutons, par quel moyen propre à javascript.

Je suis pas programmeur, donc je t'avoue que « récupérer le click », je comprends pas trop ce que ça veut dire… Capturer un événement clic ?

Bon toujours est-il que pour répondre à ta question, en voyant ton code, et même avec de bons id, je vois pas comment ça pourrait marcher, vu que ton programme fait exactement ce que tu lui demandes :

Tu lui demandes, quand on clique sur une de tes images, d'appeler la fonction maFonction() .
Il le fait.

Tu lui demandes, dans cette fonction, de te donner la valeur du bouton qui s'appelle "bouton" (donc Bernard Dupond).
Il le fait.

Mais évidemment, notre Bernard Dupond, il s'appellera toujours Bernard Dupond, et tu auras beau appeler la fonction depuis Marcel, Jacqueline ou Cléo, Bernard Dupond s'appelera toujours Bernard Dupond.

Donc…

Peut-être (un «peut-être» suggestion polie) faudrait-il que tu dises à ton programme, quand tu appelles maFonction(), QUI appelle maFonction().

Le plus simple, par rapport au code que tu as déjà, étant :

Code : Tout sélectionner

/* Dans ton code HTML, pour TOUTES tes balises input : */
onclick="maFonction(this.id)"

Le "this.id" voulant dire : l'id de moi, moi étant le input

Puis dans ton code javascript :

Code : Tout sélectionner

function maFonction(idDuInputQuiMappelle) {
var couleur=document.getElementById(idDuInputQuiMappelle).value;
/*
qui signifie, en language humain :
« prend dans le document la valeur (value) de l'élément qui s'appelle (id)
idDuInputQuiMappelle. »
*/
}

Et là, comme par miracle…

Bien à toi,

Phil

01 mars 2007, 12:11

Bien entendu, si ta fonction maFonction() se résume à prendre la valeur de ton input, il y a encore plus simple (sur la base de ton code, en le simplifiant, même).

Mais je pense que si tu as compris le principe, tu trouveras tout seul.

Bonne chance,

Phil

01 mars 2007, 17:31

Merci Phil pour ton aide. Avec maFonction(this.id) j'ai le même résultat. Mais je crois que je me suis pas bien expliquer. Je voulais pas vous saouler avec une longue explication.
J'avais déjà tester de la sorte.

Code : Tout sélectionner

<input type="image" id="bouton" border="0" src="images/rose.gif" value="rose" name="bouton" onClick="maFonction()">
<input type="image" id="bouton2" border="0" src="images/rouge.gif" value="rouge" name="bouton" onClick="maFonction()">

Code : Tout sélectionner

<script language="javascript"> 
function maFonction(){ 
var couleur=document.getElementById('bouton').value; 
} 
</script>

Je récupère bien la valeur de "bouton" ou de "bouton2". Mais ce que je veux c'est récupérer n'importe quelle valeur de n'importe quel bouton, afin de la stocker dans une variable pour que mon objet xmlhttprequest traite l'appel. Donc pour résumé, je dois récupérer les valeurs de mes boutons dans une fonction bien précise, qui fait appel à xmlhttprequest. Donc la galère. J'ai essayé ça

Code : Tout sélectionner

function maFonction(){
if(document.getElementById('bouton').click()){
var couleur=document.getElementById('bouton').value;
}
else if(document.getElementById('bouton2').click()){
var couleur=document.getElementById('bouton2').value;
}

xhr.open('POST', 'traitement.php', true);
etc...

mais couleur prend toujours la même valeur à savoir la valeur bouton, même si j'appele la valeur bouton2.

01 mars 2007, 17:56

Hello,

Avec maFonction(this.id) j'ai le même résultat.

C'est tout bonnement impossible. Tu as dû oublier d'ajouter l'argument à maFonction :

Code : Tout sélectionner

maFonction(idClicked)

et oublié de le traiter à l'intérieur de la fonction :

Code : Tout sélectionner

var couleur=document.getElementById(idClicked).value

Note que tu dois mettre "idClicked" *textuellement*, comme je l'ai écrit, pas le remplacer par "bouton" ou autre expression textuelle.

Si tu as vraiment fait ça (avec le this.id) dans le onclick, quand l'utilisateur clique sur un bouton, n'importe lequel, `couleur` prendra comme valeur le `value` que tu as défini dans le input.

Mais ce que je veux c'est récupérer n'importe quelle valeur de n'importe quel bouton,

Comprends pas… Ça veut dire quoi « récupérer n'importe quelle valeur de n'importe quel bouton » ? Quand (au clic, au démarrage, à la fermeture) ? Comment ? Par qui, etc.

afin de la stocker dans une variable pour que mon objet xmlhttprequest traite l'appel.

Quel appel ?

Donc pour résumé, je dois récupérer les valeurs de mes boutons dans une fonction bien précise, qui fait appel à xmlhttprequest. Donc la galère. J'ai essayé ça

Code : Tout sélectionner
function maFonction(){ if(document.getElementById('bouton').click()){ var couleur=document.getElementById('bouton').value; } else if(document.getElementById('bouton2').click()){ var couleur=document.getElementById('bouton2').value; } xhr.open('POST', 'traitement.php', true); etc...

Oyouwha… Ça me semble bien compliqué, ça, dis-donc…

Tu voudrais pas expliquer d'abord, en langage humain (*), ce que tu veux faire ?
(*) en langage humain : au lieu de parler de fonction, de boutons, de variables, etc. me dire un truc du genre « Je voudrais afficher des boutons sur ma page. Chacun d'eux porterait le nom d'une couleur. L'utilisateur pourrait alors cliquer sur un bouton, n'importe lequel, et puis etc. »

C'est comme ça que je règle mes problèmes personnellement. J'ai remarqué que c'était lorsque je ne savais pas ce que je voulais faire vraiment que je boggais…

Bonne chance à toi,

Phil

01 mars 2007, 18:06

Et tu dis que tu fais pas de programmation ?

Merci Phil ça fonctionne très bien maintenant. J'avais jamais entendu parler de idClicked.

D'ailleurs si tu fais une recherche dans Google et que tu tapes "javascript idClicked" tu n'auras qu'une page de résultats et tous en anglais.

En tout cas ce idClicked arrive à point nommée.
Merci encore.

01 mars 2007, 18:14

Arf, je me suis fais mal comprendre.

Il ne s'agit pas de "idClicked", c'est juste une histoire de *variable*. Essaie avec :

Code : Tout sélectionner

function maFonction(tontonFaitDuTricycle) {

couleur = document.getElementById(tontonFaitDuTricycle).value;

}

Et ça marchera tout aussi bien que :

Code : Tout sélectionner

function maFonction(jeSuisQuunNomDeVariable) {

couleur = document.getElementById(jeSuisQuunNomDeVariable).value;

}

Mais je pense qu'il nous manque quelques bases…

Bien à toi, et heureux que tu t'en sortes,

Phil

01 mars 2007, 18:15

J'ai fait une recherche sur :

« javascript tontonFaitDuTricycle »

et je n'ai eu aucun résultat

01 mars 2007, 18:19

Exact, je viens d'essayer avec tartenpion ça marche aussi.

Récupérer les valeurs de plusieurs boutons

Qui est en ligne