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 ?

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

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

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

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

Plusieurs onclick dans un input

JavaScript

Vue hybride

Discussions similaires

Partager

Partager