Page dynamique - HTML et DHTML

**Jinx_** · 10/08/2009, 15h02

Bonjour,

Je développe en PHP (non, je ne me suis pas trompé de forum) une application simple pour gérer les DVD, DivX, VHS et Livres.

J'avais l'idée de faire un formulaire/page d'ajout de média par type de média (un formulaire pour les livres, un second pour les DVD, etc) mais je trouve que c'est un peu lourd: il me faudra 4 formulaires. Or avec un seul on pourrai faire aussi bien et plus rapidement. J'explique.

J'ai vu un certain nombre de site web dynamique une fonctionnalité qui m'intéresse mais je ne sait pas comment faire: l'aspect dynamique vient du fait que sur une zone de liste déroulante (appelée combo box en Visual Basic et 'select' en HTML) on pouvait, selon le choix de cette liste déroulante, faire évoluer la page web dynamiquement. Par exemple, si on a un 'select' composé de 4 choix (DVD, DivX, VHS et Livre) faire évoluer la page dynamiquement selon le choix de l'utilisateur. Par exemple, si l'utilisateur sélectionne 'Livres' alors une zone de texte 'ISBN' apparait. Comment faire ?

Il est possible que cette fonctionnalité que j'ai vu plusieurs fois sur plusieurs site web, n'est peut-être pas du HTML ni même du DHTML. Peut-être du Java/J2EE. Ou PHP. Je ne sais pas bien.

Merci de toute aide.

J.

**HiRoN** · 10/08/2009, 15h10

Bonjour,

Par exemple déclencher le submit sur le "onchange" du select (voir mettre bouton), après plusieurs possibilités :

- Reconstruire la page via php pour afficher ou non les champs voulus
- Possible aussi en Javascript (jouer sur des display:block ou none) et évitera actualisation page
- Mixer les deux (pour du javascript non intrusif > Pas de bugs si désactivé > Php prend le relais)...

**Jinx_** · 10/08/2009, 17h19

Merci Mathieu.

La première solution, en PHP, pour reconstruire la page me séduit le plus.

Est-ce que tu peux parler davantage du 'submit' ? Et du "onchange" du select, svp ?

Un exemple ?

Merci.

J.

**HiRoN** · 10/08/2009, 17h43

Envoyé par Jinx_

Merci Mathieu.
La première solution, en PHP, pour reconstruire la page me séduit le plus.
Est-ce que tu peux parler davantage du 'submit' ? Et du "onchange" du select, svp ?
Un exemple ?

Exemple rapide (l'ensemble est à approfondir) :

Si 100% php, il te faudra un bouton de type "submit"...

En gros, l'utilisateur choisit dans la liste ce qu'il veut et clique sur le bouton.
Le submit se déclenche, la page se recharge, $_POST contient la valeur du choix de l'utilisateur et au niveau affichage, c'est du genre :

Code PHP :

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

1
2
3
if($_POST['monchamp'] == 'maVal') {
 // J'affiche le champs
}

Ce qui permet donc de mettre des champs personnalisés en fonction des choix.
Pour le onchange > évenement déclenché au changement sur la liste déroulante. Il te suffit de créer une fonction :

Code HTML :

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

<select ... onchange="monTest();">

Et côté Javascript :

Code Javascript :

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

1
2
3
function monTest() {
 document.submit(); // En fonction de ce que tu veux faire exactement
};

En gros, si JS désactivé, tu affiches le bouton "submit" (car si pas de JS > Pas de onchange donc faut bien cliquer quelque part)
Si JS activé, tu caches le bouton au "onload" (avec un display:none; part ex) et au changement sur la liste déroulante le clic sur le submit sera remplacé par l'action sur le onchange (action lui disant de submit)...

Mais avec cette technique, il y aura dans tous les cas un rechargement de la page... (car avec ou sans JS, c'est le php qui construit la page)

En espérant avoir été clair...

**Jinx_** · 10/08/2009, 18h09

Merci beaucoup Mathieu.

Pour la soluce 100% PHP, c'est bon. J'ai capté.

En revanche pour la soluce Java Script, c'est un peu plus confus. Si j'ai bien compris dans la fonction function monTest()

function monTest() {
document.submit(); // En fonction de ce que tu veux faire exactement
};

il faudrait que je mette du code pour afficher des champs (fonction du choix de l'utilisateur dans la liste déroulante). Comment faire ?

J.

**tibotibo69** · 10/08/2009, 18h43

Salut,

Tu peux faire comme ceci :

Code :

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

1
2
3
function monTest() {
document.getElementById('nom_de_ton_element').style.display = "block";
};

ce qui affichera les éléments voulu au moment du onchange.

**Jinx_** · 10/08/2009, 19h50

OK, merci a vous 2.

J'ai une autre question. J'arrive a ouvrir une nouvelle fenêtre (une pop-up window) avec un lien internet classique:

<A HREF="javascript:open_urlsize('../media/addDVD.php','',800,1000)">Ajouter un DVD</A>

Où j'ai correctement défini la fonction JavaScript open_urlsize. Pas de problème.

En revanche je voudrais ouvrir une fenêtre de la même façons (en indiquant une URL et les longueurs et largeur de la fenêtre) mais cette fois ci en utilisant un bouton 'submit'. Comment faire ?

Merci beaucoup.

J.

**tibotibo69** · 10/08/2009, 20h01

Tu peux utiliser un bouton de type "button" et faire un lien dessus.

Si tu veux utiliser un bouton de type "submit" il faudra passer par la propriété action de ton formulaire.

**Jinx_** · 10/08/2009, 20h14

Envoyé par tibotibo69

Tu peux utiliser un bouton de type "button" et faire un lien dessus.

Si tu veux utiliser un bouton de type "submit" il faudra passer par la propriété action de ton formulaire.

Merci tibotibo69. Je ne comprends pas bien. L'inconvénient avec un bouton 'submit' c'est que ca n'ouvre pas une pop-up window. Et c'est ce que je cherche. Sans pour autend perdre le formulaire du bouton submit.

Est-ce que tu peux donner un exemple ?

J.

**tibotibo69** · 10/08/2009, 20h29

Le bouton de type submit est réservé pour valider un formulaire. Si tu veux faire un lien, mieux vaut utiliser un bouton "button" :

Code :

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

<a href="onClick="window.open('./chemin _du_fichier.php')""<input type='button' name='nom' /></a>

**Jinx_** · 10/08/2009, 20h52

OK Merci mais cela ne résoud pas mon problème.

J'ai besoin de transmettre des paramètres d'un formulaire (je dois donc utiliser un bouton 'submit') et en même temps je veux ouvrir une pop-up window. Or avec ta méthode on ne peut pas passer des paramètres comme dans un formulaire. Tu comprends ? Comment faire... si c'est faisable...

J.

**tibotibo69** · 10/08/2009, 21h05

D'accord, je n'avais pas compris que tu voulais passer des valeurs du formulaire dans ce cas, tu fais comme je te disais plus haut :

Si tu veux utiliser un bouton de type "submit" il faudra passer par la propriété action de ton formulaire.

Code :

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

<form method="POST" name = "nom" action = "window.open('./chemin _du_fichier.php')" >

(je n'ai pas testé)

**Macmillenium** · 10/08/2009, 22h12

Envoyé par tibotibo69

Code :

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

<a href="onClick="window.open('./chemin _du_fichier.php')""<input type='button' name='nom' /></a>

?????

Envoyé par tibotibo69

Code :

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

<form method="POST" name = "nom" action = "window.open('./chemin _du_fichier.php')" >

Pas de JavaScript dans l'attribut action.
Il faut passer par l'évènement onsubmit :

Code html :

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

1
2
 
<form method="post" name="nom" action="action" onsubmit="window.open('./chemin _du_fichier.php')">

**tibotibo69** · 10/08/2009, 22h23

Ok je suis fatigué moi ce soir.

Bon je vais me coucher !

En revanche, je ne savais pas qu'on ne pouvait pas mettre de javascript dans la proprieté action.

Merci pour l'info.

**Jinx_** · 10/08/2009, 22h33

Au secours, MacMilenium, la metode que tu donnes ne fonctionne pas... mais alors aps du tout.

Code html :

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

1
2
 
<form method="post" name="nom" action="action" onsubmit="window.open('./chemin _du_fichier.php')">

Le script va chercher un fichier nommé 'action' qui évidement n'existe pas. J'ai supprimer le paramètre action="action", il y a du mieux, mais cela ne fonctionne toujours pas: le passage des paramètres du formulaire n'est pas bon. Quid ?

Une idée ?

J.

**Macmillenium** · 10/08/2009, 22h37

Garde l'attribut action même vide.

Envoyé par Jinx_

il y a du mieux, mais cela ne fonctionne toujours pas: le passage des paramètres du formulaire n'est pas bon. Quid ?

Quel genre de paramètres veux-tu passer ?
Quand et comment ?

**Jinx_** · 10/08/2009, 23h45

Macmillenium, merci de ton aide.

Quels genre de paramètre je veux passer ? J'ai un formulaire dans lequel il y a juste une liste de texte. Ce la valeur de cette liste de texte que je veux passer en paramètre a une pop-up window. Cette pop-up window s'ouvre bien, mais le paramètre de la liste de texte n'est pas passé dans cette nouvelle fenêtre.

J.

**Macmillenium** · 11/08/2009, 13h46

Envoyé par Jinx_

J'ai un formulaire dans lequel il y a juste une liste de texte. Ce la valeur de cette liste de texte que je veux passer en paramètre a une pop-up window. Cette pop-up window s'ouvre bien, mais le paramètre de la liste de texte n'est pas passé dans cette nouvelle fenêtre.

Oui mais comment !
- Tu veux juste passer les paramètres dans l'url addDVD.php ?
- addDVD.php est la page qui traite ton formulaire ?

Merci de poster le code PHP/(X)HTML du formulaire en question.

**Jinx_** · 11/08/2009, 17h27

Bonjour Macmillenium,

J'ai avancé depuis hier soir. J'ai remplacé mon bouton 'submit' et ma liste déroulante par un simple lien hyper texte qui ouvre une pop-up window. Ca fonctionne très bien. Néanmoins, je serais content de savoir ce qui bloquait.

Voila ma page php dans laquelle on trouve la zone de liste déroulante et le bouton 'submit' qui ouvre une pop-up window:

Code PHP :

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
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=unicode">
<STYLE type=text/css>
@import url(../lib/MyCss.css );
</STYLE>
<META content="MSHTML 6.00.2900.2523" name=GENERATOR>
</HEAD>
<Title>Gestion de la Médiathéque</Title>
 
<script>
 
function open_windowsize(name,x,y) {
	mywin = open('',name,'toolbar=0,location=0,directories=0,status=1,menubar=1,scrollbars=1,resizable=1,width='+x+',height='+y);
	mywin.focus();
	mywin.opener=self;
}
 
function open_urlsize(url,name,x,y) {
	mywin = open(url,name,'toolbar=0,location=0,directories=0,status=1,menubar=1,scrollbars=1,resizable=1,width='+x+',height='+y);
	mywin.focus();
	mywin.opener=self;
}
 
</script>
 
</HEAD>
 
<BODY>
 
<H1>Gestion de la Médiathéque</H1>
 
<H2>Ajouter un élément</H2>
 
<br>
 
Séléctioner, dans la liste déroulante ci-dessous, le type d'élément a ajouter puis cliquez sur le bouton 'Envoi'.
<br>
<br>
 
<FORM method="post" name="nom"  action='' onsubmit="javascript:open_urlsize('../media/process_choosemedia.php','',800,1000)">
 
<TABLE>
 
	<tr>
 
		<td align=left valign=top>Selectionner votre média: </td>
		<td>
			<select name="media" size="1">
				<option value="DVDS" >DVD  </option>
				<option value="DivX" >DivX</option>
				<option value="VHSS" >VHS</option>
				<option value="BOOK" >Livre</option>
			</select>
		</td>
 
		<td><input type="submit" name="submit" value="Envoie"></td>
 
	</tr>	
 
</TABLE>
 
</FORM>
 
<?php
require_once('../lib/lib_mediateque.php');
ShowBottomInfo();
?>
 
</BODY>
</HTML>

Dans le fichier au dessus, la liste déroulante s'appelle 'media'. Voila ci-dessous le contenu du fichier process_choosemedia.php qui traite le formulaire:

Code PHP :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=unicode">
<STYLE type=text/css>
@import url(../lib/MyCss.css );
</STYLE>
<META content="MSHTML 6.00.2900.2523" name=GENERATOR>
</HEAD>
<Title>Ajouter un élément</Title>
 
<script>
 
function open_urlsize(url,name,x,y) {
	mywin = open(url,name,'toolbar=0,location=0,directories=0,status=1,menubar=1,scrollbars=1,resizable=1,width='+x+',height='+y);
	mywin.focus();
	mywin.opener=self;
}
 
function validate_field(field, size, desc)
{
	var input_str=eval("document.forms[0]." + field + ".value");
	var input_len=input_str.length;
 
	if (input_str == "")  {
		alert("The "+desc+" field may not be left blank.");
		document.forms[0][field].focus();
		return (false);
	}
	if (input_len > size) {
		alert("The "+desc+" field may only contain "+size+" characters.");
		document.forms[0][field].focus();
		return (false);
	}
	return (true);
}
 
 
function validate_email(field, desc)
{
	var input_str=eval("document.forms[0]." + field + ".value");
 
    if (input_str.indexOf ('@', 0) == -1) {
        alert ("Please input a valid e-mail address.")
		document.forms[0][field].focus();
		return (false);
	}
	return (true);
}
 
function submit_me()
{
	if (!validate_field("hisName", 100, "Name")) { return (false); }
	if (!validate_field("hisMessage", 1024, "Message")) { return (false); }
	if (!validate_field("hisEmail", 100, "Email")) { return (false); }
	if (!validate_email("hisEmail", "Email"))  { return (false); }
 
	return (true);
}
 
 
 
</script>
 
</HEAD>
 
<BODY>
 
<?php
 
require_once('../lib/lib_mediateque.php');
 
$choixMedia = $_POST['media'];
 
$Label="Erreur";
 
switch ($choixMedia) {
    case "DVDS":
        $Label= "DVD";
		printDVDForm();
        break;
    case "VHSS":
        $Label= "VHS";
		printVHSForm();
        break;
    case "DivX":
        $Label= "DivX";
		printDivXForm();
        break;
    case "BOOK":
		printDVDForm();
        $Label= "Livre";
        break;
}
 
// echo " <H1>Ajouter un " . $Label . "</H1>";
 
// ShowBottomInfo();
 
?>
 
</BODY>
</HTML>

Le problème est que vue de la nouvelle fenêtre pop-up window, la variable $choixMedia = $_POST['media'] est VIDE. C'est le problème

Ce même script fonctionne bien avec un lien internet qui n'ouvre pas une pop-up window.

Voila.

J.

**Macmillenium** · 11/08/2009, 18h02

http://www.developpez.net/forums/d58...mulaire-popup/

Page dynamique - HTML et DHTML

HTML

Discussions similaires

Partager

Partager