[DOM] Faire appel aux éléments de type input

**sliderman** · 19/05/2008, 16h02

Bonjour,

Je voudrais récuperer tous les élements de type input.
Sous FF, quand je fais un document.getElementByTagName('input'), le naviigateur me renvoi bien les bon élémeny

mais pas IE (6)

j'ai consulté la FAQ DOM de ce site, mais j'ai rien trouvé

est ce qu'il existe une fonction IE équivalent à getElementsByTagName() sous IE ?

Merci de vos réponses,

PS : IE me retour une erreur, 'non implémenté'

**tusssss** · 19/05/2008, 16h06

getElementsByTagName il me semble.

Edit: en fait tu l'écrit de 2 manières différentes. Désolé

**le_chomeur** · 19/05/2008, 16h06

essaye :

Code :

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

1
2
3
4
 
 function ie_getElementsByTagName(tag) {
   return document.all.tags(tag)
}

**Auteur** · 19/05/2008, 16h22

curieux

document.getElementsByTagName() est reconnue par IE également....

sliderman : on peut voir ton code HTML et javascript ?

**sliderman** · 19/05/2008, 16h44

Envoyé par le_chomeur

essaye :

Code :

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

1
2
3
4
 
 function ie_getElementsByTagName(tag) {
   return document.all.tags(tag)
}

ça fonctionne, merci ça ne me retourne pas gérer d'évenemlent sur l'objet

Pour répondre à la demande de Auteur, voici mon code

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
window.onload=init;
function init()
{
	$('create-new-env').onchange=env;
	var env = document.getElementById('para-env').getElementsByTagName('input');
	for(var i = env.length - 1 ; i>=0;i--)
	{
		env[i].onclick=relocate;
	}
}
function env()
{
	if(this.checked)
	{
		var input = document.createElement('input');
		input.setAttribute('type','texte');
		input.setAttribute('name','new-environment-name');
		input.setAttribute('id','new-environment-name');
		$('para-new-env').appendChild(input);
 
	}
	else
	{
		$('para-new-env').removeChild($('new-environment-name'));
	}
}
function relocate()
{
	document.location.href="orders.php?env="+this.value;
}

et voici le HTML

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>SkyRecon System - Extranet</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="javascript/lib/prototype-1.6.0.2.js"></script>
		<script type="text/javascript" src="javascript/lib/<br />
<b>Notice</b>:  Undefined variable: web_engine in <b>C:\Documents and Settings\mrabbaa\Mes documents\workspace\skyline\include\top.php</b> on line <b>8</b><br />
.js"></script>
		<link rel="stylesheet" href="image/css.css" type="text/css"/>
 
		<!--[if IE]><link rel="stylesheet" href="image/cssIE.css" type="text/css"/><![endif]-->
		<link rel="stylesheet" type="text/css" href="stylesheet/general.css" /><link rel="stylesheet" type="text/css" href="stylesheet/skyrecon.css" /><script type="text/javascript" src="javascript/environments.js"></script>		<link rel="icon" type="image/png" href="image/sky_16.png" />
        </head>
        <body>
        	<table height="120" width="100%" bgcolor="#ffffff" border="0" align="center" cellpadding="0" 
        		cellspacing="0">
        		<tr>
					<td class="title">
						<a href="panel.php">
 
							<img src="image/spacer.gif" width="200" border="0" height="120" alt="spacer" />
						</a>
					</td>
					<td class="topcenter" id="warning">
					</td>
					<td class="topright">
						<img src="image/spacer.gif" width="1" border="0" height="1" alt="spacer" />
					</td>
				</tr>
 
			</table>
			<table width="100%"  bgcolor="#ffffff" border="0" align="center" cellpadding="0" cellspacing="0">
				<tr>
					<td class="leftborderpath">
						<img src="image/spacer.gif" width="1" height="1" alt="spacer" />
					</td>
					<td id="TDmain">
       				<div id="header">
	                	<div id="user">
 
	                		<p>Welcome mrabbaa</p>
	                	</div>
	               		<div id="logout">
	               			<a class="button" href="script/logout.php">
	               				<span>Logout</span>
	               			</a>
	               		</div>
       				</div>
 
       				<div id="header_barre"> 
       				</div><div class="menu">
	<ul>
<li class="action"><a href=panel.php?type=product>Product information</a></li><li class="action"><a href="account.php">New Account</a></li><li class="action"><a href="admin.php">Administration</a></li><li class="action"><a href="create-client-account.php">Marketing documentation</a></li><li class=action><a href="version.php"?type = prod_doc>Product Documentation</a></li><li class=action><a href="version.php">Software</a></li><li class="action"><a href="licence.php">Access Key</a></li><li class="action"><a href="orders.php">Manage orders</a></li>		<li class='action' style='margin-top:50px;'><a href='script/logout.php'>Logout</a></li>
	</ul>
 
</div>
<div class="mainCenter">	<div class='TxtLabel'>Account's data</div><br />
 
<div class="sub">
	<div class="divLabel">Login</div>
	<div class="divValue">mrabbaa</div>
</div>
<div class="sub">
	<div class="divLabel">Firstname</div>
 
	<div class="divValue">rabbaa</div>
</div>
<div class="sub">
	<div class="divLabel">Lastname</div>
	<div class="divValue">marwan</div>
</div>
<div class="sub">
	<div class="divLabel">password</div>
	<div class="divValue">wayerdiove</div>
 
</div>
<div class="sub">
	<div class="divLabel">Language</div>
	<div class="divValue">fr</div>
</div>
<div class="sub">
	<div class="divLabel">Email</div>
	<div class="divValue">mrabbaa@skyrecon.com</div>
</div>
 
<div class="sub">
	<div class="divLabel">Phone</div>
	<div class="divValue">0124568797</div>
</div>
 
<div class="sub">
        <div class="divLabel">Version</div>
        <div class="divValue">4.2</div>
</div>
 
<div class="sub">
        <div class="divLabel">Company</div>
        <div class="divValue">google</div>
</div>
<div class="sub">
	<p>Existing environments</p>
	<form action="copy.php?type=link-already" method="post" class="cssform">
	<p id="para-env">
	<label for="env-exist:1">Tartampion</label><input type="radio" value="1" id="env-exist:1" name="env-id" /><label for="env-exist:2">Ambonpoint</label><input type="radio" value="2" id="env-exist:2" name="env-id" />	</p>
 
	<p id="para-new-env">
	<label for="new">New Environments</label>
	<input type="radio" value="new" name="new" id="create-new-env" />
	<input type="submit" value="Create" />
	</p>
	<p>Copy a licence on the customer's directory</p>
	<p>
	<form action="copy.php" method="post" class="cssform">
 
		<input type="hidden" name="myAction" value="search">
		<input type="hidden" name="account" value="1">
		<fieldset>
			<p>
			    <label for="client">Environment: </label>	
			    <input type="text" id="env" name="env" value="" />
			</p> 
			<p>
			    <input type="submit" id="submit" name="submit" value="Search" />
 
			    <input type="reset" id="reset" name="reset" value="Reset" />
			</p>     
		</fieldset>
	</form>
	</p>
</div>
</DIV>
</TD>
<TD class="rightborderpath"><IMG src="image/spacer.gif" width="1" height="1" /></TD>
</TR>
</TABLE>
<TABLE height="25" width="100%" bgcolor="#ffffff" border="0" align="center" cellpadding="0" cellspacing="0">
<TR>
 
<TD class="bottomleft" valign="top"><IMG src="image/spacer.gif" width="1" border="0" height="1" /></TD>
 
<TD class="btmsection"><IMG src="image/spacer.gif" width="1" border="0" height="1" /></TD>
<TD class="bottomright" valign="top"><IMG src="image/spacer.gif" width="1" border="0" height="1" /></TD>
 
</TR>
</TABLE>
 
<script language="javascript">
document.getElementById("warning").innerHTML = "";
</script>
 
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-1177753-4";
urchinTracker();
</script>
        </body>
 
</html>

il me semble que c'est cette ligne :

Code :

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

document.getElementById('create-new-env').onclick=env;

qui fait que les autres ne sont pas interprétées.

**E.Bzz** · 19/05/2008, 17h13

Bonjour,
il serait judicieux de renommer soit ta variable, soit ta fonction.
Parce qu'avec ton code actuel, il peut y avoir des erreurs d'interprétation du nav (ou du développeur

)

Code :

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

1
2
3
4
5
6
7
8
9
	$('create-new-env').onchange=env;
	var env = document.getElementById('para-env').getElementsByTagName('input');
	for(var i = env.length - 1 ; i>=0;i--)
	{
		env[i].onclick=relocate;
	}
}
function env()
...

A+

**SpaceFrog** · 19/05/2008, 17h21

Code :

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

document.all.

heu ça c'est pas crossbrowser ...

**sliderman** · 19/05/2008, 17h22

Envoyé par E.Bzz

Bonjour,
il serait judicieux de renommer soit ta variable, soit ta fonction.
Parce qu'avec ton code actuel, il peut y avoir des erreurs d'interprétation du nav (ou du développeur

)

Code :

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

1
2
3
4
5
6
7
8
9
	$('create-new-env').onchange=env;
	var env = document.getElementById('para-env').getElementsByTagName('input');
	for(var i = env.length - 1 ; i>=0;i--)
	{
		env[i].onclick=relocate;
	}
}
function env()
...

A+

toujours pareil

Envoyé par SpaceFrog

Code :

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

document.all.

heu ça c'est pas crossbrowser ...

enfaite j'ai une lib (lib-tident) qui est loader au chargement d'IE et une autre au chargement de firefox (lib-gecko)

oui j'aime bien le chargement dynamique
j'ai finallement changé mon script

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
window.onload=init;
function init()
{
 
	var env = document.getElementById('para-env').getElementsByTagName('input');
	for(var i = env.length - 1 ; i>=0;i--)
	{
		env[i].onclick=function()
		{
			document.location.href="orders.php?env="+this.value;
		}
	}
	document.getElementById('create-new-env').onclick=function()
	{
		if(this.checked)
		{
			var input = document.createElement('input');
			input.setAttribute('type','texte');
			input.setAttribute('name','new-environment-name');
			input.setAttribute('id','new-environment-name');
			$('para-new-env').appendChild(input);
 
		}
		else
		{
			$('para-new-env').removeChild($('new-environment-name'));
		}
	}
}

**E.Bzz** · 19/05/2008, 17h23

Envoyé par SpaceFrog

Code :

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

document.all.

heu ça c'est pas crossbrowser ...

Alors que getElementsByTagName, si.
D'où ma remarque ...

A+

**sliderman** · 19/05/2008, 17h47

Envoyé par E.Bzz

Alors que getElementsByTagName, si.
D'où ma remarque ...

A+

Comme je t'ai dis j'utilise une libraire par navigateur
pour IE : lib-trident
pour FF : lib-gecko

lib-trident remplace (implémente) la fonction getElementsByTagName et retourne le résultat de document.all.$tag
où tag est le nom recherché

en tout cas merci à le_chomeur pour sa remarque

**Auteur** · 19/05/2008, 22h06

Code javascript :

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

1
2
3
4
5
 
                var input = document.createElement('input');
		input.setAttribute('type','texte');
		input.setAttribute('name','new-environment-name');
		input.setAttribute('id','new-environment-name');

les fonctions setAttribute et getAttribute ne sont pas reconnues par IE !!!
il faudrait mettre cette remarque dans la FAQ où je ne sais où... Cette erreur devient récurrente

Il faut écrire :

Code javascript :

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

1
2
3
4
5
 
               var input = document.createElement('input');
		input.type = "text"; // c'est text pas texte ;)
		/*input.name = "new-environment-name";*/ // problème avec IE voir ma remarque ci-dessous
		input.id = "new-environment-name";

pour enfoncer le clou et paraphraser Spacefrog

: avec IE on ne peut attribuer dynamiquement l'attribut name d'un élément

**SpaceFrog** · 19/05/2008, 22h12

si mais comme ça :

Code :

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

var input = document.createElement('<input name = "new-environment-name">);

et du coup il faut deux synatxes une pour IE et une pour Gecko ...

mais vas vois les contributions FORM DYNAMIQUE ...
y'a tout ce qu'il faut

**Auteur** · 19/05/2008, 22h18

Envoyé par SpaceFrog

si mais comme ça :

Code :

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

var input = document.createElement('<input name = "new-environment-name">');

et du coup il faut deux syntaxes une pour IE et une pour Gecko ...

mais vas vois les contributions FORM DYNAMIQUE ...
y'a tout ce qu'il faut

oui

disons que je n'ai pas l'habitude d'utiliser createElement de cette manière. Et comme tu l'écris il faut deux syntaxes

Oui j'ai vu ta contribution

[DOM] Faire appel aux éléments de type input

JavaScript

Discussions similaires

Partager

Partager