Plusieurs onclick dans un input

**mathias59** · 03/12/2008, 09h54

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 :

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

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:

**Saray** · 03/12/2008, 10h02

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

Code :

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

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

**Deallyra** · 03/12/2008, 10h12

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

dans vos messages pour une meilleure lisibilité

**mathias59** · 03/12/2008, 10h24

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

**OButterlin** · 03/12/2008, 10h25

Et pourquoi ne pas faire simple

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
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>

**mathias59** · 03/12/2008, 10h26

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

**Saray** · 03/12/2008, 10h39

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 :

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
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

**SpaceFrog** · 03/12/2008, 10h57

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 :

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
<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>

**javatwister** · 03/12/2008, 11h01

ou encore:

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
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>

**Deallyra** · 03/12/2008, 11h02

Envoyé par OButterlin

Et pourquoi ne pas faire simple

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
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

**SpaceFrog** · 03/12/2008, 11h07

Oui ou encore

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
<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>

**SpaceFrog** · 03/12/2008, 11h13

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

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
<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>

**Saray** · 03/12/2008, 11h18

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

**javatwister** · 03/12/2008, 11h27

tiens, encore une variante économique

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
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>

**mathias59** · 03/12/2008, 11h55

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.

**SpaceFrog** · 03/12/2008, 12h34

Version ave click unique

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
<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>

**Deallyra** · 03/12/2008, 13h27

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.

**OButterlin** · 03/12/2008, 13h59

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 ?

**javatwister** · 03/12/2008, 14h27

bon, il me semble qu'on a fait le tour là...

**Deallyra** · 03/12/2008, 16h55

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 :

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

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?

Plusieurs onclick dans un input

JavaScript

Discussions similaires

Partager

Partager