Plusieurs onclick dans un input

Version imprimable

Bonjour,

Je veux que lorsqu'on clique sur plusieurs liens les valeurs s'ajoute à la suite de lautre dans un input comme ceci, mais je n'arrive pas à ajouter plusieurs liens.

ex: quand je clique sur 123 ça doit ajouter dans input 123 mais la ce n'est pas le cas.
Code:

1 2 3 4 5 6 7 8 <a href="#" onclick="document.getElementById('code').value='1';">1</a> <a href="#" onclick="document.getElementById('code').value='2';">2</a> <a href="#" onclick="document.getElementById('code').value='3';">3</a> <form action="traitement.php" method="post"> <input type="text" id="code" name="key" /> <input type="submit"> </form>
Merci pour votre réponse:

Avec un '+' devant le = ça ira mieux...

Code:

1
2
3
4
5
6
7
8
<a href="#" onclick="document.getElementById('code').value+='1';">1</a>
<a href="#" onclick="document.getElementById('code').value+='2';">2</a>
<a href="#" onclick="document.getElementById('code').value+='3';">3</a>
 
<form action="traitement.php" method="post">
<input type="text" id="code" name="key" />
<input type="submit">
</form>

Saray

03/12/2008, 10h12
Deallyra

Bonjour,

Proposition intéressante par Saray mais malheureusement fausse.

exemple :

value à 0.

Je clique sur 1, value = 1
Je clique ensuite sur 2, (value = 3) != 12

Comment faire alors?

Puisque tu utilises le JS, via une fonction JS ^^

Lors du onclick, tu appelles une fonction avec en paramètre ta valeur.

En variable, un compteur, initialisé à 0.

Dans ta fonction JS, tu fais

paramètre*10^compteur

C'est ce résultat que tu dois attribuer à code.
Bien sûr, avec un += de façon à ne pas "écraser" le résultat précédent.

edit : merci de placer les balises code http://www.developpez.net/forums/images/editor/code.gifdans vos messages pour une meilleure lisibilité
03/12/2008, 10h24
mathias59

Merci pour vos réponse c'est ce que j'attendais

Et pourquoi ne pas faire simple ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<html>
<head>
 
<script>
function ajouter(v)
{
    var c = document.forms[0].Champ1;
    c.value = c.value + v; 
}
</script>
</head>
 
<body>
 
<a onclick="ajouter(1)">1</a>,
<a onclick="ajouter(2)">2</a>,
<a onclick="ajouter(3)">3</a>
 
<form>
Mon champ <input type="text" name="Champ1"/><br>
</form>
 
</body>
</html>

03/12/2008, 10h26
mathias59

Est comment fait on pour ne pas afficher 2 fois le même chiffre ?

Tu as raison Deallyra, un petit toString() corrigerait la problème pour éviter les sommes de nombres.

Pour continuer sur le code de OButterlin et ne pas afficher 2 fois le même chiffre.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <html> <head> <script> function ajouter(v) { var c = document.forms[0].Champ1; // test si le chiffre est déjà présent if(!c.value.indexOf(v)){ if(c.value==0)c.value=''; c.value += v.toString(); } } </script> </head> <body> <a onclick="ajouter(1)">1</a>, <a onclick="ajouter(2)">2</a>, <a onclick="ajouter(3)">3</a> <form> Mon champ <input type="text" name="Champ1"/><br> </form> </body> </html>
Saray

Trop simplifier est parfois l'ennemi du bien ...
Voici un code minimaliste mais qui n'en oublie pas pour autant les bases d'un code correct

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type='text/javascript'>
function ajouter(v)
{
   document.forms[0].elements['key'].value += v+''; 
}
</script>
</head>
 
<body>
 
<a href="#" onclick="ajouter(1);return false;">1</a>,
<a href="#"  onclick="ajouter(2);return false;">2</a>,
<a href="#"  onclick="ajouter(3);return false;">3</a>
<form action="traitement.php" method="post">
<input type="text" id="code" name="key" value="" readonly="readonly" />
<input type="submit" value='envoyer'>
</form>
 
</html>

ou encore:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div id="liens">
	<a href="#">1</a>
	<a href="#">2</a>
	<a href="#">3</a>
</div>
 
<form id="f" action="traitement.php" method="post">
	<div>
		<input type="text" id="code" name="key" />
		<input type="reset" value="vider" />		
		<input type="submit" />
	</div>
</form>
 
<script type="text/javascript">
 
var l=document.getElementById("liens").getElementsByTagName("a");
var c=document.getElementById('code');
 
 
for(i=0;i!=l.length;i++){
	l[i].onclick=function(){
		if(!c.value.match(this.firstChild.data)){
			c.value+=this.firstChild.data;
			return false;
		}
	}
}
 
</script>

Citation:
Envoyé par OButterlin
Et pourquoi ne pas faire simple ;)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <html> <head> <script> function ajouter(v) { var c = document.forms[0].Champ1; c.value = c.value + v; } </script> </head> <body> <a onclick="ajouter(1)">1</a>, <a onclick="ajouter(2)">2</a>, <a onclick="ajouter(3)">3</a> <form> Mon champ <input type="text" name="Champ1"/><br> </form> </body> </html>
Question.

Ta variable c est locale non? ^^

augmentes là autant que tu veux, je pense que tu auras un petit problème quant au résultat attendu :)

Oui ou encore :mouarf:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
function ajouter(v)
{
document.forms[0].elements['key'].value += v+''; 
}
</script>
</head>
 
<body>
 
<a href="javascript:ajouter(1)" >1</a>
<a href="javascript:ajouter(2)" >2</a>,
<a href="javascript:ajouter(3)" >3</a>,
<form action="traitement.php" method="post">
<input type="text" id="code" name="key" value="" readonly="readonly" />
<input type="submit" value='envoyer'>
</form>

sans toString ni +'' en passant par innerHTML qui retourne forcément du string:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
function ajouter(v)
{
   document.forms[0].elements['key'].value += v.innerHTML; 
}
</script>
</head>
 
<body>
 
<a href="#" onclick="ajouter(this);return false;" >1</a>
<a href="#" onclick="ajouter(this);return false;" >2</a>
<a href="#" onclick="ajouter(this);return false;" >3</a>
<form action="traitement.php" method="post">
<input type="text" id="code" name="key" value="" readonly="readonly" />
<input type="submit" value='envoyer'>
</form>

03/12/2008, 11h18
Saray

Citation:

Envoyé par Deallyra

Question.

Ta variable c est locale non? ^^

augmentes là autant que tu veux, je pense que tu auras un petit problème quant au résultat attendu :)

c est locale mais il vaut l'objet input... le plus important c'est que c.value change de valeur...

Saray

tiens, encore une variante économique :mrgreen:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="liens">
	<a href="#">1</a>
	<a href="#">2</a>
	<a href="#">3</a>
</div>
 
<form id="f" action="traitement.php" method="post">
	<div>
		<input type="text" id="code" name="key" />
		<input type="reset" value="vider" />		
		<input type="submit" />
	</div>
</form>
 
<script type="text/javascript">
 
var l=document.getElementById("liens").getElementsByTagName("a");
var c=document.getElementById('code');
 
 
for(i=0;i!=l.length;i++){
	l[i].ind=i+1;
	l[i].onclick=function(){
		if(!c.value.match(this.ind)){
			c.value+=this.ind;
			return false;
		}
	}
}
 
</script>

03/12/2008, 11h55
mathias59

La réponse de javatwister est très bien, et si on veux afficher des images au lieux des :

<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>

par ceci:

<input type=image src="puce.bmp" value="1">
<input type=image src="puce.bmp" value="2">

J'ai trouver la réponse.

Version ave click unique

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
function ajouter(v)
{
   document.forms[0].elements['key'].value += v.innerHTML; 
   v.onclick=function(){return false;}
   return false;
}
</script>
</head>
 
<body>
 
<a href="#" onclick="ajouter(this);" >1</a>
<a href="#" onclick="ajouter(this);" >2</a>
<a href="#" onclick="ajouter(this);" >3</a>
<form action="traitement.php" method="post">
<input type="text" id="code" name="key" value="" readonly="readonly" />
<input type="submit" value='envoyer'>
</form>

03/12/2008, 13h27
Deallyra

Citation:

Envoyé par Saray

c est locale mais il vaut l'objet input... le plus important c'est que c.value change de valeur...

Saray

c.value change de valeur dans le bloc.

Une fois sortit du bloc, la valeur de c.value est perdue.
03/12/2008, 13h59
OButterlin

Citation:

Envoyé par Deallyra

c.value change de valeur dans le bloc.

Une fois sortit du bloc, la valeur de c.value est perdue.

Vous avez au moins essayé d'exécuter le code ?
"c" contient l'adresse de l'objet représentant le champ du formulaire, on se fiche royalement que c soit perdu en sortant de la fonction puisque la valeur du champ pointé a été modifiée, c'était le but non ?
03/12/2008, 14h27
javatwister

bon, il me semble qu'on a fait le tour là... :roll:
03/12/2008, 16h55
Deallyra
Non, je ne l'ai pas testé.

Mais si vous me dîtes qu'il s'agit d'un pointeur, au vu de ma connaissance du JavaScript... Je vous concède volontiers ce point.

Mais en ce cas, pourquoi ne pas utiliser
Code:

1 2 3 4 5 6 7 <script> function ajouter(v) { document.forms[0].Champ1.value = document.forms[0].Champ1.value.value + v; } </script>
Et à titre informatif, qu'est ce qui, en JavaScript, définit une variable "simple" d'une variable contenant un pointeur?
03/12/2008, 17h26
OButterlin
Citation:
Envoyé par Deallyra

Non, je ne l'ai pas testé.

Mais si vous me dîtes qu'il s'agit d'un pointeur, au vu de ma connaissance du JavaScript... Je vous concède volontiers ce point.

Mais en ce cas, pourquoi ne pas utiliser

Code:

1 2 3 4 5 6 7 <script> function ajouter(v) { document.forms[0].Champ1.value = document.forms[0].Champ1.value.value + v; } </script>
Ça fonctionnera également, je passais par une variable parce que la chaîne est longue et que ça clarifie un peu...

Citation:

Envoyé par Deallyra

Et à titre informatif, qu'est ce qui, en JavaScript, définit une variable "simple" d'une variable contenant un pointeur?

Ben, la variable référencée... :mouarf:
J'imagine que ce n'est pas forcément ce que tu attendais, mais c'est hélas le cas. Javascript étant un langage non typé, on ne sait pas de manière évidente sur quoi l'on travaille.
Exemple
Code:

1 2 3 4 var etat = 1; <-- etat est numérique etat += 2; <-- toujours numérique etat += " exemples"; <-- "String"

Code:

1
2
3
4
var etat = 1; <-- etat est numérique
etat += 2; <-- toujours numérique
etat += 2+''; <-- hop magique c'est du string 
etat += " exemples"; <-- "String"

:mrgreen:;)

03/12/2008, 20h20
Deallyra
Je m'endormirai moins bête ce soir?

C'est une bonne chose.

Merci pour cette explication.

@SpaceFrog

Pas bien de tricher... ^^
Code:

1 2 3 4 etat += 2+''; <-- hop magique c'est du string == etat += 2; etat += ''

Re bonjour, cette discussion prend de l'empleur à ce que je vois.

Ma question est comment faire une alert pour afficher que 6 numéro ?

exemple d'alerte ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<script>
function select_numero(numero) {
		var var_numero = ('0' + numero).substring(('0' + numero).length-2, ('0' + numero).length);
		{
			alert('Vous ne pouvez sélectioner que 6 numéros');
		}
 
 
 
 
 
function ajouter(v)
{
   document.forms[0].elements['key'].value += v.innerHTML; 
   v.onclick=function(){return false;}
   return false;
}
</script>
</head>
 
<body>
 
<a href="#" onclick="ajouter(this);" >1</a>
<a href="#" onclick="ajouter(this);" >2</a>
<a href="#" onclick="ajouter(this);" >3</a>
<form action="traitement.php" method="post">
<input type="text" id="code" name="key" value="" readonly="readonly" />
<input type="submit" value='envoyer'>
</form>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type='text/javascript'> 
function ajouter(v)
{
   if(document.forms[0].elements['key'].value.length==6){
    alert(' vous ne pouvez ajouter que 6 numéros !');
    return false;
    } 
   document.forms[0].elements['key'].value += v.innerHTML; 
 
}
</script>
</head>
 
<body>
 
<a href="#" onclick="ajouter(this);" >1</a>
<a href="#" onclick="ajouter(this);" >2</a>
<a href="#" onclick="ajouter(this);" >3</a>
<form action="traitement.php" method="post">
<input type="text" id="code" name="key" value="" readonly="readonly" />
<input type="submit" value='envoyer'>
</form>

Fuseau horaire GMT +2. Il est actuellement 03h28.