document.getElementById()

Version imprimable

Bonjour, j'ai fait un petit programme en javascript qui "dégrise" un bouton que si tout les champs du formulaire sont remplis.
A la base j'utilisais simplement:

Code:

document.getElementById("valider0").innerHTML = '<input border="0" src="images/Valider1.png" type="image" value="submit" onmouseover="this.src=\'images/Valider2.png\';" onmouseout="this.src=\'images/Valider1.png\';"/>';

Pour faire apparaitre un bouton qui "s'enfonce" quand on passe dessus, Mais avec IE ça marché pas :evilred: donc j'ai fait ça:
Code:

1 2 3 4 5 6 document.getElementById("valider0").src="images/Valider1.png"; document.getElementById("valider0").type="image"; document.getElementById("valider0").value="submit"; document.getElementById("valider0").onmouseover="this.src='images/Valider2.png';"; document.getElementById("valider0").onmouseout="this.src='images/Valider1.png';"; document.getElementById("valider0").disabled = '';
En fait par défaut j'ai bien une image de bouton "grisé" puis quand je remplis tout les boutons j'ai bien un bouton en couleur sur lequel je peux cliquer pour passer à la suite, mais quand je passe dessus il y a pas l'effet "d'enfoncement" que je voudrait.

Sinon mon 2ème problème est toujours avec IE :evilred: , lorsque j'ouvre la page j'ai un message d'erreur:

Citation:

Stack overflow at line: 0

J'ai déja cherché sur le net mais c'est dur de trouver des réponses pour des sujets aussi précis...
Merci d'avance pour vos réponses :D

salut :)

alors pour ton boutton essaye plutot de le créer dynamiquement exemple :

tu as uen div qui va recevoir ton bouton :

<div id="toto"></div>
Code:

1 2 3 4 5 6 7 8 9 10 var noeudReceveur = document.getElementById('toto'); var imgBoutton = document.createElement("img"); //On lui attribut une source imgBoutton.setAttribute("src","tonimage.jpg"); //et les actions imgBoutton.setAttribute('onmouseover','image2.jpg'); //Pour finir on ajoute l'image dans la div noeudReceveur .appendChild(imgBoutton );
je te laisse travailler un peu pour que tu comprennes le principe tout seul :)

bon courage ;)

15/11/2007, 21h47
Doom2Darkness
J'ai essayer:
Code:

1 2 document.getElementById("valider0").setAttribute("onmouseover","this.src='images/Valider2.png';" ); document.getElementById("valider0").setAttribute("onmouseout","this.src='images/Valider1.png';" );
Mais le truc c'est qu'en faisant des recherches sur setAttribute j'ai trouvé ça:

Citation:

Sous firefox, il suffit d'indiquer :

mon_element.setAttribute("onclick","code javascript");

Internet explorer n'affichera pas d'erreur de code mais ne l'interprètera pas non plus.
Pour pouvoir affecter un événement sous ie, il faudra alors passer par la notation :

mon_element.onclick = nomdefonction;

ou alors : mon_element.onclick = function() { code javascript }

La 2ème notation est celle que j'utilisais et ça marché pas, la première notation c'est celle que je montre juste là et ça marche pas non plus, par contre l'erreur Stack overflow at line: 0 n'apparait plus non plus.
15/11/2007, 21h56
Auteur
bonjour,

pourquoi ne pas utiliser la propriété disabled de ton bouton ?
Code:

1 2 <input type="button" value="Bouton" id="idButton" disabled="true" />
en JS
Code:

1 2 document.getElementById("idButton").disabled = false;
innerHTML pour insérer un bouton :nono: Ce n'est vraiment pas la bonne méthode pour insérer un élément dans la page (renseigne toi sur createElement).

Il est vrai que IE ne reconnait pas setAttribute() et getAttribute() ;)
15/11/2007, 22h01
Doom2Darkness
Citation:
Envoyé par Auteur

bonjour,

pourquoi ne pas utiliser la propriété disabled de ton bouton ?

Code:

1 2 <input type="button" value="Bouton" id="idButton" disabled="true" />

en JS

Code:

1 2 document.getElementById("idButton").disabled = false;
Je le fait, en fait dans un premier temps j'affiche un bouton gris en disabled, un fois que tous les champs du formulaire sont remplis, j'affiche le même bouton avec les couleurs et je voudrais que quand on passe sur ce bouton il s'enfonce (que ça passe à une image avec le bouton enfoncé) car à coté il y a un bouton annuler auquel j'ai mis cette propriétée. Mais le truc c'est que j'arrive pas à trouver une solution pour sous IE pour dire que si tout les champs du formulaire sont pleins il faut rajouter les attributs:
Code:

1 2 onmouseover="this.src='images/Valider2.png';" onmouseout="this.src='images/Valider1.png';"

voici u exemple complet qui marche ;)

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
	function nouveaubutton(){
		var noeudReceveur = document.getElementById('toto');
		var imgBoutton = document.createElement("img");
		//On lui attribut une source 
		imgBoutton.setAttribute("src","click.jpg");
		//et les actions 
		imgBoutton.setAttribute('onmouseover','click2.jpg');
		imgBoutton.setAttribute('onmouseout','click.jpg');
		imgBoutton.onmouseover = function(){this.src='click2.jpg';};
		imgBoutton.onmouseout = function(){this.src='click.jpg';};
		//Pour finir on ajoute l'image dans la div
		noeudReceveur .appendChild(imgBoutton );
	}
</script>
</head>
 
<body>
 
<div id="toto"></div>
<input type="image" src="click.jpg" onclick='nouveaubutton()'/>
</body>
</html>

15/11/2007, 23h04
Doom2Darkness

Merci beaucoup mais ce programme ne résoud pas mon problème, il semblerait que setAttribute ne veuille pas modifier un attribut déja existant. Toi ton programme crée un 2ème bouton qui peut faire l'effet "enfoncer", et au final je me retrouve avec 2 boutons. Moi dans mon programme j'ai déja un bouton grisé et SI tous les champs du formulaire sont remplis je veux modifier les attributs de ce bouton, tout d'abord modifier son src pour mettre celui du bouton coloré, puis modifier onmouseover et onmouseout pour qu'il passe une autre image pour donner un effet d'enfoncement, et si jamais on enlève 1 valeur du formulaire le bouton se re-grise donc le src repasse à l'imae grise et onmouseover/onmouseout deviennent nuls.
En fait tout marché très bien sous firefox avec innerHTML mais lorsque j'ai testé sous IE ça faisait rien c'est asssez énervant :evilred:.
15/11/2007, 23h43
le_chomeur

post la page et le code de la partie que tu souhaites rendre compatible ie/firefox ;)

En gros voila le code, j'ai pas mis toutes les fonctions et tout les input c'est pas la peine:

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
56
57
58
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css" href="design.css" />
	<title>Document sans nom</title>
 
	<script language="Javascript">	
        /*Là j'ai des fonctions qui vérifie chaque champ de formulaire et qui mettent un booléens à true si le champs est bien remplis*/
        function VerifForm()
	{
		if(/*Là j'ai mis les booléens, si ils sont tous à "true" tout les champs sont bien remplis*/)
		{
			document.getElementById("valider0").src="images/Valider1.png"; 
			document.getElementById("valider0").type="image"; 
			document.getElementById("valider0").value="submit"; 
			document.getElementById("valider0").onmouseover="this.src='images/Valider2.png';";
			document.getElementById("valider0").onmouseout="this.src='images/Valider1.png';";
			document.getElementById("valider0").disabled = "";
		}
		else
		{
			document.getElementById("valider0").src="images/InValid.png";
			document.getElementById("valider0").type="image"; 
			document.getElementById("valider0").value="submit"; 
			document.getElementById("valider0").onmouseover="";
			document.getElementById("valider0").onmouseout="";
			document.getElementById("valider0").disabled = "disabled";
 
		}
 
	}
	</script>
</head>
 
<body>
         <form method="post" action="projet2.html">
 
         /*Là j'ai mes input pour le formulaire*/
 
		<table id="Boutons" align="center" width="500">
			<tr>
 
				<td align="left">
					<div id="toto"></div>
						<input type="image" src="images/Valider1.png" onclick='VerifForm()'/>
				</td>
				<td align="right"><img src="images/Annuler1.png" 
									   onmouseover="this.src='images/Annuler2.png';" 
									   onmouseout="this.src='images/Annuler1.png';"/>
                                </td>
			</tr>	
		</table>
 
	</form>
 
</body>
</html>

voila je pense que c'est ce que tu voulais :

- état par défaut : désactivé img par défaut
- activer : img change + activation du rollover
- désactiver : img par défaut ( ou autre ;) ) + désactivation du click

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css" href="design.css" />
	<title>Document sans nom</title>
 
	<script language="Javascript">	
        /*Là j'ai des fonctions qui vérifie chaque champ de formulaire et qui mettent un booléens à true si le champs est bien remplis*/
        function VerifForm(action)
	{
		if(action)
		{
			document.getElementById("valider0").src="click2.jpg"; 
			document.getElementById("valider0").onmouseover=function(){this.src='click.jpg';};
			document.getElementById("valider0").onmouseout=function(){this.src='click2.jpg';};
			document.getElementById("valider0").disabled = false;
		}
		else
		{
			document.getElementById("valider0").src="click.jpg"; 
			document.getElementById("valider0").disabled = 'disabled';
		}
 
	}
	</script>
</head>
 
<body>
         <form method="post" action="projet2.html">
 
         /*Là j'ai mes input pour le formulaire*/
 
		<table id="Boutons" align="center" width="500">
			<tr>
 
				<td align="left">
						<input id="valider0" type="image" src="click.jpg" disabled="disabled" />
				</td>
				<td align="right"><img src="click.jpg" 
									   onmouseover="this.src='click2.jpg';" 
									   onmouseout="this.src='click.jpg';"/>
                                </td>
			</tr>	
		</table>
 		<input type="button" value="activer" onclick='VerifForm(true)'/>
        <input type="button" value="desactiver" onclick='VerifForm(false)'/>
	</form>
 
</body>
</html>s

17/11/2007, 12h13
Doom2Darkness

Bon, j'ai essayé avec plusieurs possibilités mais je sais pas pourquoi mais ça marché pas donc je vais laisser tomber, cet effet qui est juste esthétique, merci pour toutes vos réponses.

Mais j'aurais une autre petit question, mes fichiers en .html marchaient très bien, mais comme j'ai 3 fichiers avec des formulaires je voudrais les réunir en 1 fichiers en .php, un fois qu'on aura remlpi et valider le premier forumlaire, il affichera le 2ème puis le 3ème, donc j'ai juste mis le fichier en .php et j'ai rajouté des if qui vont bien pour afficher d'abord le premier "if(!isset($_POST['etape1']))", enfin bref, le fait de passer en .php, plus rien de ce que j'avait fait ne marche. Est-il possible de pouvoir utiliser mon code dans un fichier php, de cette manière je compte d'abord faire une première vérification des données avec javascript, puis une 2ème avec php, ensuite toutes les informations seront envoyés vers une BDD. Je cherche sur le net comment mélanger Php, html et javascript, mais les gens ont l'air de faire ça tout bêtement comme je l'avait fait au début, mais pour moi ça marche pas.
J'ai éssayé de tout mettre dans des echo mais ça ne marche pas non plus.

EDIT: Oula j'ai rien dit j'aviat oublié de copier un des repertoires de mon projet donc forcément ça marché plus xD.