Discussion :

[philippef]

Bonjour,

Je cherche depuis un moment comment faire pour afficher un div en fonction d'un test.

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
<div id="div1" style="display:block;">
<form name="inscription" method="POST">
<table border="0" align="center" style="font-size:12px">
	<tr> ici des input type="text"
		<td align="right" colspan="2"><span style="cursor:pointer;color:blue" onclick="fermer_form('div1','div2','div3')"><img src="images/droite.jpg" style="border:none" alt="" /></span></td>
	</tr>
</table>
</div>

ici tout le traitement de 2 calendriers

<div id="div2" style="display:none">
<!---affichage des dates sélectionnées--->
<center>
date d'arrivée :&nbsp;&nbsp;&nbsp;<input type="text" name="DateDebut" style="border:1px blue solid;width:80px;cursor:pointer;" maxlength="10" id="dateDebut" onfocus="visuCal(this);" onblur="masqueCal(this);" onkeyup="this.style.color=testTypeDate(this.value)">&nbsp;&nbsp;&nbsp;
date de départ :&nbsp;&nbsp;&nbsp;<input type="text" name="DateFin" style="border:1px blue solid;width:80px;cursor:pointer;" maxlength="10" id="dateFin" onfocus="visuCal(this);" onblur="masqueCal(this);" onkeyup="this.style.color=testTypeDate(this.value)">&nbsp;&nbsp;&nbsp;
<input type="submit" name="valider" value="valider" style="width:60px; cursor:pointer">
<br /><br />

<?php
//test de validité des dates
if ((!empty($DateDebut)) && (!empty($DateFin))){
	list($jour, $mois, $annee) = explode('/', $DateDebut);
	//initialise les jours de la semaine d'arrivée
	$joursemaine = array('dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi');
	// calcul du timestamp de la date de début
	$timestamp1 = mktime (0, 0, 0, $mois, $jour, $annee);
	list($jourf, $moisf, $anneef) = explode('/', $DateFin);
	$timestamp2 = mktime (0, 0, 0, $moisf, $jourf, $anneef);
	//teste si la date de départ est inférieure à la date d'arrivée
	if ($timestamp2 <= $timestamp1){
		echo "<br /><span style='color:red'><strong>La date de départ doit être supérieure à la date d'arrivée!</strong></span><br />";
	}
	//teste si la date de départ est supérieure à la date d'arrivée
	elseif ($timestamp2 > $timestamp1){
		//teste si les dates de départ et d'arrivée sont un samedi
		if ($joursemaine[date("w",$timestamp1)] != 'samedi'){
			echo $joursemaine[date("w",$timestamp1)];
			echo " $DateDebut <span style='color:red'><strong> La date d'arrivée doit être un <u>samedi</u> !!</strong></span><br />";
		}
		if ($joursemaine[date("w",$timestamp2)] != 'samedi'){
			echo "<br /><span style='color:red'><strong>La date de départ doit être un <u>samedi</u> !!</strong></span><br />";
		}
	}
	//si tout est correcte enregistrer la réservation
}
?>

</center>
</div>

<div id="div3" style="display:none">
<center>
date d'arrivée :&nbsp;&nbsp;&nbsp;<input type="text" name="DateDebut1" value="<?php echo $DateDebut1;?>" style="border:1px blue solid;width:80px;" maxlength="10" >&nbsp;&nbsp;&nbsp;
date de départ :&nbsp;&nbsp;&nbsp;<input type="text" name="DateFin1" value="<?php echo $DateFin1;?>" style="border:1px blue solid;width:80px;" maxlength="10" >&nbsp;&nbsp;&nbsp;
<input type="button" name="valider" value="Modifier" style="width:70px; cursor:pointer">
</div>
</form>

la fonction javascript pour afficher et cacher les div

Code :

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

1
2
3
4
5
function fermer_form(id,id1,id2){
	document.getElementById('div1').style.display="none";
	document.getElementById('div2').style.display="block";
	document.getElementById('div3').style.display="none";
}

Le formulaire contient 3 <div>
<div id="div1" style="display:block"> contient des input à compléter.
quand l'utilisateur clique sur le lien étape2, je cache le "div1", j'affiche le <div id="div2" style="display:none"> qui contient deux calendriers pour sélectionner 2 dates.
Le <div id="div3" style="display:none"> contient les dates sélectionnées.

Quand on valide le formulaire, le "div1" s'affiche et les 2 autres sont cachés.
Je voudrais afficher le "div1" si les input type="text" ne sont bons ou le "div3" si les dates testées ne sont pas correctes.
Si tout est correcte, j'affiche une autre page.
J'espère être clair dans mon explication

Merci d'avance

[vermine]

Bonjour,

J'ai une petite remarque concernant les paramètres que vous passez à votre fonction :

Code html :

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

onclick="fermer_form('div1','div2','div3');"

Vous lui passez les trois ids et ici vous ne vous en servez pas :

Code js :

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

1
2
3
4
5
function fermer_form(id,id1,id2){
	document.getElementById('div1').style.display="none";
	document.getElementById('div2').style.display="block";
	document.getElementById('div3').style.display="none";
}

Quitte à les passer, autant les utiliser :

Code js :

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

1
2
3
4
5
function fermer_form(id1,id2,id3){
	document.getElementById(id1).style.display="none";
	document.getElementById(id2).style.display="block";
	document.getElementById(id3).style.display="none";
}

J'ai renommé les paramètres pour être en accord avec les ids.

Pour ce qui est d'afficher les <div> après le submit, c'est du PhP. Il me semble que c'est au même endroit que l'affichage des <span> d'erreur car c'est à cet endroit que vous savez si il faut afficher ou non les <div>.