Déplacer texte d'une zone vers une autre

Version imprimable

28/04/2009, 17h46
SALISTASE

Déplacer texte d'une zone vers une autre

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.
29/04/2009, 08h52
SpaceFrog

Code:

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

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:

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>

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

29/04/2009, 10h15
SALISTASE

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"?
29/04/2009, 10h53
SpaceFrog

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

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:

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.

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

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

04/05/2009, 10h54
SpaceFrog

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
04/05/2009, 11h04
SALISTASE

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 :oops:
Merci bcp pour ton aide.