Affichage dynamique et formulaire
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:
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:
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.
