Pop Up qui disparaît + getElementById() qui est indefined

**Général03** · 10/03/2009, 23h25

Bonjour,

je souhaite réaliser une PopUp pour afficher des informations à l'utilisateur. Normalement ca doit être simple, mais je n'y arrive pas !!!

j'ai un script JS dans lequel j'ai ça :

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
function AffichePopUp(Chaine) {
 
	document.getElementById('Idiv').style.visibility = "visible"; 
 
	var tempo = document.getElementById('Idiv').value;
 
	document.getElementById('Idiv').innerHTML = tempo+Chaine  ;
}
 
//Teste les champs du membre
function IsConnectMembre(Pseudo,MDP)
{
	if(document.getElementById(Pseudo).value=="")
	{
		AffichePopUp("Veuillez saisir votre pseudo");
	}
...
}

qui est appelé dans mon HTML

Code :

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

1
2
3
4
5
6
7
8
 
			<div id="Idiv" class="divPopUp">
 
				<span class="spanCorpPopUp">
						Le contenu
 
				</span>
			</div>

Pour faire la mise en forme j'utilise ce CSS

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
.spanCorpPopUp
{
display : block;
 
width: 260px;
height: 9em;/* Hauteur correspondant à celle de notre image */
background : transparent url('img/centre.png') no-repeat top left;
}
 
.divPopUp{
/*Fixe la div par rapport au coin supérieur gauche de la page*/
position:absolute; 
left:50%;
top:50%;
visibility:hidden;
display:block;
}

Dans ma pop up j'ai bien mon texte "Veuillez saisir votre pseudo" qui s'affiche mais la div disparaît tout de suite après !!! Je ne comprends pas pourquoi elle ne reste pas visible ?

De plus, je souhaite récupérer le contenu de ma div dans la variable tempo pour mettre à la suite le texte "Veuillez saisir votre pseudo" mais quand je veux l'afficher (avec alert() ) j'obtiens "undefined", mais pourquoi ????
Aidez moi je suis en grande détresse...

**Bovino** · 11/03/2009, 06h44

Code :

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

var tempo = document.getElementById('Idiv').value;

Une div n'a pas de propriété value, donc tempo est effectivement undefined.

**Général03** · 11/03/2009, 09h05

Alors comment je peux faire pour ajouter du texte dans ma div ?

**E.Bzz** · 11/03/2009, 09h09

Bonjour,

Envoyé par Général03

Alors comment je peux faire pour ajouter du texte dans ma div ?

Code :

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

document.getElementById('Idiv').innerHTML = tempo+Chaine  ;

A+

**Général03** · 11/03/2009, 09h23

OK, je viens de tester et le texte que je veux s'affiche merci E.Bzz.
Par contre, ma div disparait tout de suite après qu'elle est apparue. Je vois le texte "Veuillez saisir votre pseudo" 1 seconde et après plus rien. J'ai essayé de jouer sur la visibility mais rien n'y fait elle ne veux pas rester visible. Cela vient du fait que j'ai appliqué

Code :

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

document.getElementById('Idiv').innerHTML = tempo+Chaine  ;

?

**E.Bzz** · 11/03/2009, 09h26

Envoyé par Général03

OK, je viens de tester et le texte que je veux s'affiche merci E.Bzz.

De rien, c'est ton code

Tu n'as pas un timer dans ta page ?
Qui rafraichirait la pop trop rapidement ?

Sinon, donne nous tout le code ....

A+

**Général03** · 11/03/2009, 09h37

Non je n'utilise pas de timer. Voila mon code HTML simplifié :

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
 
<head>
<script type="text/javascript" src="JS/verifformulaire.js"></script>
<link rel="stylesheet" href="PopUp.css" type="text/css">
</head>
 
<body>
 
		<form method="post"  enctype="multipart/form-data" >
 
			<div id="IChampsConnexion">						
				Nom d'utilisateur <br>
				Mot de passe
			</div>
 
			<div id="IMembre">
				<input type="text" id="IDPseudo" name="user"> <br>
				<input  type="password" id="IDMDP" name="password">	
			</div>
 
			<div id="IValide">
				<input type="submit" value="S'enregistrer" onclick="IsConnectMembre('IDPseudo','IDMDP');">
				<a value="Créer son compte" href="NvxMembre.html" >Créer son compte</a>
			</div>
 
		</form>
 
<!--Pop up de réponse-->
 
		<a id="info_bulle" class="aPopUp" >
			<div id="Idiv" class="divPopUp">
				<span class="spanHeaderPopUp">
				<!--<span class="header">En-tête de la popup</span>-->
					<span class="spanCorpPopUp">
						Vos informations seront ici
					</span>
				<!--<span class="footer">Pied de page popup</span>-->
				</span>
			</div>
		</a>
 
 
</body>

Pour le Javascript et le CSS voir plus haut, ils sont inchangés.

PS : j'ai essayé de refaire un bout de code simplifié avec juste ma pop up (codes ci-dessus) mais toujours le même comportement

**E.Bzz** · 11/03/2009, 09h46

C'est la soumission de ton <form> qui intervient à la suite de l'affichage de ta "pop" (ne l'appelle pas "pop", ce n'est qu'un div, pas une fenêtre), et efface le texte puisque la page est rechargée

Code :

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

<input type="submit" value="S'enregistrer" onclick="IsConnectMembre('IDPseudo','IDMDP');">

Il faut que ça soit la validation du pseudo qui lance le submit(), et non le clic sur le bouton ....

A+

**Général03** · 11/03/2009, 10h57

Merci tu es vraiment un dieu

ça fonctionne je vois ma div

Par contre pour la soumission du formulaire j'utilise ces lignes dans mon JS

Code :

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

document.getElementById('formul').submit();

où "formul" est l'ID de mon formulaire
Mais cette ligne ne donne aucune action : après avoir fait cela l'évènement "onsubmit" est lancé ? Dans mon html j'aimerais lancer ensuite une page PHP pour aller en base de donnée une fois que le user et mode de passe sont saisis

Code :

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

<form id="formul" method="post"  enctype="multipart/form-data" onsubmit="page.php" >...</form>

**E.Bzz** · 11/03/2009, 11h03

C'est l'attribut "action" qui est utilisé lors du submit()

Code :

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

<form name="formul" id="formul" method="post"  enctype="multipart/form-data" action="page.php" >...</form>

et

Code :

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

document.forms['formul'].submit();

A+

**Général03** · 11/03/2009, 11h33

Merci beaucoup E.Bzz tu m'a vraiment aidé je te tire mon chapeau

Pour ceux que ça intéresse mon code (qui fonctionne) est le suivant :
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
<head>
<script type="text/javascript" src="JS/verifformulaire.js"></script>
</head>
 
<body>
 
	<form name="formul" method="post"  enctype="multipart/form-data" action="page.php" >
 
			<div id="IChampsConnexion">						
				Nom d'utilisateur <br>
				Mot de passe
			</div>
 
			<div id="IMembre">
				<input type="text" id="IDPseudo" name="user"> <br>
				<input  type="password" id="IDMDP" name="password">	
			</div>
 
			<div id="IValide">
				<input type="button" value="S'enregistrer" onclick="IsConnectMembre('IDPseudo','IDMDP');">
				<a value="Créer son compte" href="NvxMembre.html" >Créer son compte</a>
			</div>
		</form>		
 
<!--Fenêtre de réponse-->
 
			<div id="Idiv" class="divPopUp">
 
				Vos informations seront ici
 
			</div>
 
 
</body>

Javascript

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
function AffichePopUp(Chaine) {
 
	document.getElementById('Idiv').style.visibility = "visible"; 
 
	document.getElementById('Idiv').innerHTML = Chaine ;	
 
}
 
//Teste les champs du membre
function IsConnectMembre(Pseudo,MDP)
{
	if(document.getElementById(Pseudo).value=="")
	{
		AffichePopUp("Veuillez saisir votre pseudo");
	}
	else
	{
		if(document.getElementById(MDP).value=="")
		{
		AffichePopUp("Veuillez saisir votre mot de passe");
		}
		else
		{
		document.forms['formul'].submit();
		}
	}
}

Encore merci

Pop Up qui disparaît + getElementById() qui est indefined

JavaScript

Discussions similaires

Partager

Partager