Déplacer texte d'une zone vers une autre

**SALISTASE** · 28/04/2009, 17h46

Bonjour à tous,
voilà je cherche un script(javascript) qui me permet de déplacer un texte d'une zone de texte type texarea vers une autre zone de texte.
Pour être plus claire, je suppose que j'ai une liste intitulée "Personnes" et qui contient les valeurs suivantes :"Toto,tutu,titi" dans une Areatext ou autre et je veux par exemple déplacer la personne "toto" vers une autre liste qui sera intitulée "personnes invitées" en utilisant un bouton "ajouter". les deux listes sont sur la même page.
comment pourrais je faire ceci en javascript?
désolée si je ne me suis pas bien exprimée.
Merci pour votre aide.

**SpaceFrog** · 29/04/2009, 08h52

Code :

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

onchange="docoument.getElementById('autreTextArea').value+=this.value"

**SALISTASE** · 29/04/2009, 09h38

voici ce que j'ai fait comme code mais ça ne marche pas.
Pourriez vous me réctifier SVP.
c'est une simple page html que vous pourriez tester.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html>
<head>
<SCRIPT language="Javascript">
<!--
 function add(zone)
 {
 document.getElementById(zone).value+=this.value;
 }
// -->
</SCRIPT>
</head>
<body>
			<div>
					<span ><label name="lb_role" for="role">Roles :</label></span>
					<span >
					<table border="0" cellpadding="0" cellspacing="0"> 
						<tr>
							<td id="zone1">
								<select name="role" size="10">
									<option>Toto</option>
									<option>Tutu</option>
									<option>Titi</option>
									<option>Tata</option>
											</select>
							</td>
							<td id="zone2">
								<select name="roles" size="5">
									<option>Tata</option>
									<option>Titi</option>
								</select>
							</td>
							</tr>
							<tr>
							<td valign="top">		
										<div>
											<button type="button" onclick="JavaScript: add(zone2);">Ajouter</button>
										</div>
										</td>
						</tr>
					</table>
					</span>
			</div>
 
</body>
</html>

**SpaceFrog** · 29/04/2009, 09h43

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
this :roll: attention au contexte
 
<html>
<head>
<SCRIPT language="Javascript">
<!--
 function add(texte,zone)
 {
 document.getElementById(zone).value+=texte;
 }
// -->
</SCRIPT>
</head>
<body>
			<div>
					<span ><label name="lb_role" for="role">Roles :</label></span>
					<span >
					<table border="0" cellpadding="0" cellspacing="0"> 
						<tr>
							<td id="zone1">
								<select name="role" size="10">
									<option>Toto</option>
									<option>Tutu</option>
									<option>Titi</option>
									<option>Tata</option>
											</select>
							</td>
							<td id="zone2">
								<select name="roles" size="5" onchange="add(this.value;'zone2')">
									<option>Tata</option>
									<option>Titi</option>
								</select>
							</td>
							</tr>
							<tr>
							<td valign="top">		
										<div>
 
										</div>
										</td>
						</tr>
					</table>
					</span>
			</div>
 
</body>
</html>

**SALISTASE** · 29/04/2009, 10h15

désolée mais ça ne marche pas.
d'ailleurs comment se fait l'écriture dans la nouvelle zone de texte si on utilise pas de "write"?

**SpaceFrog** · 29/04/2009, 10h53

mouarf ...
heu tu parle de textarea masi tu n'as que des select sur ta page ...

pose ta question plus clairement, tu basculer les options d'ou à ou ????

si c'est d'un select à un autre tu as un post au dessu qui traite du sujet !

un textarea à une value ... pas un select ...
définis d'abord ton ergonomie ...

**SALISTASE** · 04/05/2009, 08h57

désolée pour le retard, je travaillais sur autre chose.
Voilà pour répondre à la question de SpaceFrog, il s'agit de Select et pas de textarea.
ci-dessous le code final avec une fonction déplacer, cette fonction marche normalement sauf que ce n'est pas le cas pour mois. serait un ce un Pb de version de navigateur?

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html>
<head>
<SCRIPT language="Javascript">
<!--
function Deplace(l1,l2) {
if (l1.options.selectedIndex>=0) {
o=new Option(l1.options[l1.options.selectedIndex]
.text,l1.options[l1.options.selectedIndex].value);
l2.options[l2.options.length]=o;
l1.options[l1.options.selectedIndex]=null; }else{
alert("Veuillez séléctionner un élément");
}
}
 
// -->
</SCRIPT>
</head>
<body>
			<div>
					<span ><label name="lb_role" for="role">Roles :</label></span>
					<span >
					<table border="0" cellpadding="0" cellspacing="0"> 
						<tr>
							<td>
								<select name="role" size="10" >
									<option>Toto</option>
									<option>Tutu</option>
									<option>Titi</option>
									<option>Tata</option>
											</select>
							</td>
							<td>
								<select name="roles" size="5" >
									<option size="6" style="width:100px"></option>
								</select>
							</td>
							</tr>
							<tr>
							<td valign="top">		
										<div>
                     <INPUT type="button" value="Ajouter >>>" onClick="Deplacer(this.form.role,this.form.roles);">
                     <INPUT type="button" value=">>> Supprimer" onClick="Deplacer(this.form.roles,this.form.role);" >
										</div>
										</td>
						</tr>
					</table>
					</span>
			</div>
 
</body>
</html>

Merci d'avance.

**andry.aime** · 04/05/2009, 10h40

Salut,
l1.options[l1.options.selectedIndex].text n'est pas cross-browser.
Tu n'utilise pas de formulaire (balise form).

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
<head>
<script type="text/javascript" >
<!--
function Deplacer(l1,l2)
{
	if (l1.options.selectedIndex>=0)
	{
		o=new Option(l1.options[l1.options.selectedIndex].firstChild.nodeValue,l1.options[l1.options.selectedIndex].value);
		l2.options[l2.length]=o;
		l1.options[l1.options.selectedIndex]=null;
	}
	else
	{
	alert("Veuillez séléctionner un élément");
	}
}
 
// -->
</script>
</head>
<body>
			<div>
					<span ><label name="lb_role" for="role">Roles :</label></span>
					<span >
					<table border="0" cellpadding="0" cellspacing="0"> 
						<tr>
							<td>
								<select name="role" id="role" size="10" >
									<option>Toto</option>
									<option>Tutu</option>
									<option>Titi</option>
									<option>Tata</option>
											</select>
							</td>
							<td>
								<select name="roles" id="roles" size="5" >
									<option size="6" style="width:100px"></option>
								</select>
							</td>
							</tr>
							<tr>
							<td valign="top">		
										<div>
                     <INPUT type="button" value="Ajouter >>>" onClick="Deplacer(document.getElementById('role'),document.getElementById('roles'));">
                     <INPUT type="button" value=">>> Supprimer" onClick="Deplacer(document.getElementById('roles'),document.getElementById('role'));" >
										</div>
										</td>
						</tr>
					</table>
					</span>
			</div>
 
</body>
</html>

**SpaceFrog** · 04/05/2009, 10h54

Oui, ceci étant il y a beaucoup lus simple pour déplacer une option d'un select à un autre...
il suffit d'appender l'option dans l'autre select

**SALISTASE** · 04/05/2009, 11h04

Ohhh Super merci pour ton aide, il est vrai que je n'ai pas de balise Form dans mon code te j'ai gardé la syntaxe du code que j'ai recopié sans faire attention, ça m'apprendra à ne pas faire des Copier/Coller bêtes

Merci bcp pour ton aide.

Déplacer texte d'une zone vers une autre

JavaScript

Discussions similaires

Partager

Partager