Affichage dynamique et formulaire

**Jeremy60500** · 07/06/2013, 00h15

Bonsoir,

Je chercherais à afficher dynamiquement mon formulaire.

Alors, j'ai 2 types de formulaire différent dans mon même formulaire :

- Pour un commutateur avec seuls les champs adresse IP et le nombre de ports en caracteristique.
- Pour un routeur et firewall, avec une liste de Nombre d'Interface compris entre 2 et 6 en caracteristique.

Sauf que lorsque je sélectionne un nombre d'interface en mode routeur, je souhaiterais afficher de 2 à 6 input pour insérer les adresses IP correspondantes. Et seule cette partie ne fonctionne pas, je n'arrive pas à afficher dynamiquement mes inputs.

Voici mon code php du 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
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
<div id='fiche_individuelle_PC' style="height:500px;">
<form action='index.php?page=inventaire/reseau&action=sauvegarder' method="post">
<h1 style="margin:10px 0 0 10px;">
	<img src="images/icon/informations.png" class="alignement-gauche">Informations :
</h1>
<div id='input_gauche'>
<input type='hidden' name='id' value='<?php echo $id; ?>'>
<p><label style="width:80px;">Nom :</label>
<input value='<?php echo $nom_reseau;?>' type='text' name='nom_reseau' style="width:150px;")</p>
<p><label style="width:80px;">État :</label>
<select type='text' name='etat_reseau' style="width:100px;")
<option></option>
<option>
<?php 
while ($ligne = $etat->fetch(PDO::FETCH_ASSOC)) {
    // on affiche les informations de l'enregistrement en cours
    echo '<option value="'.$ligne['IdEtat'];
	if ($ligne['IdEtat'] == $idetat)echo '" selected '; // On selectionne le groupe de l'utilisateur en premier
	echo '">'.$ligne['NomEtat'].'</option>';
}
?>
</option></select></p>
<p><label style="width:80px;">Lieu :</label>
<select value='<?php echo $lieu_reseau;?>' type='text' name='lieu_reseau' style="width:200px;")
<option></option>
<option>
<?php 
while ($ligne = $secteur->fetch(PDO::FETCH_ASSOC)) {
    // on affiche les informations de l'enregistrement en cours
    echo '<option value="'.$ligne['IdSecteur'];
	if ($ligne['IdSecteur'] == $idsecteur)echo '" selected '; // On selectionne le groupe de l'utilisateur en premier
	echo '">'.$ligne['NomSecteur'].'</option>';
}
?>
</option></select></p>
<p><label style="width:80px;">Modèle :</label>
<select id='modele' name='modele' style="width:190px; height:20px;">
<option></option>
<?php 
if(empty($id)) {
 
}
else  {
while ($ligne = $modele->fetch(PDO::FETCH_ASSOC)) {
    // on affiche les informations de l'enregistrement en cours
    echo '<option value="'.$ligne['NomModele'];
	if ($ligne['IdModele'] == $id_modele)echo '" selected '; // On selectionne le groupe de l'utilisateur en premier
	echo '">'.$ligne['NomModele'].'</option>';
}
}
?>
</select></p>
<p><label style="width:80px;">Firmware :</label>
<input value='<?php echo $firmware_reseau;?>' type='text' name='firmware_reseau' style="width:150px;")</p>
</div>
 
<div id='input_droite'><p><label style="width:160px;">Type de l'équipement :</label>
<select value='<?php echo $type_reseau;?>' type='text' id='type' name='type' style="width:160px;" onchange="types(this)";>
<option>
<?php 
while ($ligne = $type_materiel->fetch(PDO::FETCH_ASSOC)) {
    // on affiche les informations de l'enregistrement en cours
    echo '<option value="'.$ligne['IdTypeMateriel'];
	if ($ligne['IdTypeMateriel'] == $equipement_reseau)echo '" selected '; // On selectionne le groupe de l'utilisateur en premier
	echo '">'.$ligne['NomTypeMateriel'].'</option>';
}
?>
</option></select></p>
<p><label style="width:160px;">Responsable technique :</label>
<select value='<?php echo $responsable_reseau;?>' type='text' name='responsable_reseau' style="width:160px;")
<option></option>
<option>
<?php 
while ($ligne = $responsable->fetch(PDO::FETCH_ASSOC)) {
    // on affiche les informations de l'enregistrement en cours
    echo '<option value="'.$ligne['IdUtilisateur'];
	if ($ligne['IdUtilisateur'] == $idresponsable)echo '" selected '; // On selectionne le groupe de l'utilisateur en premier
	echo '">'.$ligne['Nom'].' '.''.$ligne['Prenom'].'</option>';
}
?>
</option></select></p>
<p><label for="nom" style="width:160px;">Numéro de Série :</label>
<input value='<?php echo $serial_reseau;?>' type='text' name='serial_reseau' style="width:130px;")</p>
<p><label for="nom" style="width:160px;">Numéro d'inventaire :</label>
<input value='<?php echo $inventaire_reseau;?>' type='text' name='inventaire_reseau' style="width:100px;")</p>
<p><label for="nom" style="width:160px;">Commentaires :</label>
<textarea name="commentaire" placeholder="Aucun commentaire." style="float:left; width:250px; height:150px; margin-right:10px; padding:5px;">
<?php 
/* Si la variable description est remplie, c'est une edition, on affiche la valeur de description_chemin
   Sinon ça veut dire que l'on est en création et que la variable est vide, donc on la déclare vide. 
   Tout cela est pour faciliter la verification de la présence de données ou non dans le textearea.
*/		
if(!empty($commentaire_reseau)) {
echo $commentaire_reseau; } 
else {
	$commentaire_reseau='';
	}?>
</textarea>
</p>
</div>
<div style="margin-left:35px;">
<div id='input_gauche'><p><div id='addIP' style='display:none;'><label style="width:80px;">Adresse IP :</label>
<input value='<?php echo $addIP1;?>' type='text' name='addIP1' style="width:180px;"></div></p>
<p><div id='nbinterface' style='display:none;'><label style='width:160px;'>Nombre d'Interface :</label>
<select value='<?php echo $nb_interface;?>' type='text' id="nbinterface" name='nbinterface' style="width:80px;" onchange="nbinterface(this)";>
<option>
<?php 
while ($ligne = $nbinterface->fetch(PDO::FETCH_ASSOC)) {
    // on affiche les informations de l'enregistrement en cours
    echo '<option value="'.$ligne['ValeurCaracteristique'];
	if ($ligne['ValeurCaracteristique'] == $idresponsable)echo '" selected '; // On selectionne le groupe de l'utilisateur en premier
	echo '">'.$ligne['ValeurCaracteristique'].'</option>';
}
?>
</option></select></div></p>
<div id='div_ip1' style='display:none;'><p><label style="width:160px;">Adresse IP Interface 1 :</label>
<input value='<?php echo $addIP1;?>' type='text' name='addIP1' style="width:180px;"></p></div>
<div id='div_ip3' style='display:none;'><p><label style="width:160px;">Adresse IP Interface 3 :</label>
<input value='<?php echo $addIP3;?>' type='text' name='addIP3' style="width:180px;"></p></div>
<div id='div_ip5' style='display:none;'><p><label style="width:160px;">Adresse IP Interface 5 :</label>
<input value='<?php echo $addIP5;?>' type='text' name='addIP5' style="width:180px;"></p></div>
</div>
 
<div id='input_droite'><p><div id='nbport' style='display:none;'><label style="width:160px;">Nombre de Port :</label>
<select type='text' name='nb_ports' style="width:80px;">
<option>
<?php 
while ($ligne = $nbport->fetch(PDO::FETCH_ASSOC)) {
    // on affiche les informations de l'enregistrement en cours
    echo '<option value="'.$ligne['ValeurCaracteristique'];
	if ($ligne['ValeurCaracteristique'] == $nb_port)echo '" selected '; // On selectionne le groupe de l'utilisateur en premier
	echo '">'.$ligne['ValeurCaracteristique'].'</option>';
}
?>
</option></select></div></p>
<div id='div_ip2' style="display:none;"><p><label style="width:160px;">Adresse IP Interface 2 :</label>
<input value='<?php echo $addIP2;?>' type='text' name='addIP2' style="width:180px;"></p></div>
<div id='div_ip4' style="display:none;"><p><label style="width:160px;">Adresse IP Interface 4 :</label>
<input value='<?php echo $addIP4;?>' type='text' name='addIP4' style="width:180px;"></p></div>
<div id='div_ip6' style="display:none;"><p><label style="width:160px;">Adresse IP Interface 6 :</label>
<input value='<?php echo $addIP6;?>' type='text' name='addIP6' style="width:180px;"></p></div>
</div></div>
 
<div id='div_valide' style="display:none;"><input type="submit" id="valider" value='<?php echo $bouton;?>' style='margin-left:400px;'></div></div>
</div></form></div>

Voici mon code 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
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
function types(lst)
{
// Si notre périphérique est un commutateur, on affiche le div correspondant
var div_principal=document.getElementById("fiche_individuelle_PC");
var bouton=document.getElementById("div_valide");
var addIP=document.getElementById("addIP");
var nbport=document.getElementById("nbport");
var nbinterface=document.getElementById("nbinterface");
 
if (lst.selectedIndex==1) {
nbinterface.style.display="none";
bouton.style.display="block";
addIP.style.display="block";
nbport.style.display="block";
div_principal.style.height='520px';
}
else if (lst.selectedIndex==2 || lst.selectedIndex==3) {
nbinterface.style.display="block";
bouton.style.display="block";
addIP.style.display="none";
nbport.style.display="none";
div_principal.style.height='520px';
}
else {
nbinterface.style.display="none";
addIP.style.display="none";
nbport.style.display="none";
bouton.style.display="none";
div_principal.style.height='500px';
}
}
 
function nbinterface(nb)
{
var interface_ip1=document.getElementById("div_ip1");
var interface_ip2=document.getElementById("div_ip2");
var interface_ip3=document.getElementById("div_ip3");
var interface_ip4=document.getElementById("div_ip4");
var interface_ip5=document.getElementById("div_ip5");
var interface_ip6=document.getElementById("div_ip6");
var div_principal=document.getElementById("fiche_individuelle_PC");
 
if (nb.selectedIndex==1) {
interface_ip1.style.display="block";
interface_ip2.style.display="block";
interface_ip3.style.display="none";
interface_ip4.style.display="none";
interface_ip5.style.display="none";
interface_ip6.style.display="none";
div_principal.style.height='570px';
}
else if (nb.selectedIndex==2) { 
interface_ip1.style.display="block";
interface_ip2.style.display="block";
interface_ip3.style.display="block";
interface_ip4.style.display="none";
interface_ip5.style.display="none";
interface_ip6.style.display="none";
div_principal.style.height='620px';
}
else if (nb.selectedIndex==3) { 
interface_ip1.style.display="block";
interface_ip2.style.display="block";
interface_ip3.style.display="block";
interface_ip4.style.display="block";
interface_ip5.style.display="none";
interface_ip6.style.display="none";
div_principal.style.height='620px';
}
else if (nb.selectedIndex==4) { 
interface_ip1.style.display="block";
interface_ip2.style.display="block";
interface_ip3.style.display="block";
interface_ip4.style.display="block";
interface_ip5.style.display="block";
interface_ip6.style.display="none";
div_principal.style.height='670px';
}
else if (nb.selectedIndex==5) { 
interface_ip1.style.display="block";
interface_ip2.style.display="block";
interface_ip3.style.display="block";
interface_ip4.style.display="block";
interface_ip5.style.display="block";
interface_ip6.style.display="block";
div_principal.style.height='670px';
}
else {
interface_ip1.style.display="none";
interface_ip2.style.display="none";
interface_ip3.style.display="none";
interface_ip4.style.display="none";
interface_ip5.style.display="none";
interface_ip6.style.display="none";
}
}

Merci beaucoup de me venir en aide.

**andry.aime** · 07/06/2013, 08h13

Bonjour,

1- à lire: Important : Les règles incontournables d'utilisation de ce forum.
2-

<p><div id='nbinterface' style='display:none;'><label style='width:160px;'>Nombre d'Interface :</label>
<select value='<?php echo $nb_interface;?>' type='text' id="nbinterface" name='nbinterface' style="width:80px;" onchange="nbinterface(this)";>
<option>

a- un id doit être unique dans un document.
b- un select n'a pas d'attribut "type".

3-

<option>
<?php
while ($ligne = $nbinterface->fetch(PDO::FETCH_ASSOC)) {
// on affiche les informations de l'enregistrement en cours
echo '<option value="'.$ligne['ValeurCaracteristique'];

Une balise option ne doit pas imbriqué d'autre balise, là tu imbriques des balises options.

A+.

Affichage dynamique et formulaire

JavaScript

Discussions similaires

Partager

Partager