HELP problème affichage JavaScript
e.khalil
Messages postés
33
Date d'inscription
Statut
Membre
Dernière intervention
-
e.khalil Messages postés 33 Date d'inscription Statut Membre Dernière intervention -
e.khalil Messages postés 33 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je suis entrain de développer une application en PHP/MySQL, bref, j'ai un formulaire où je voudrais afficher/cacher un champ en fonction de la valeur sélectionnée dans <select><option></option> ... voir plus précisément en bas.
Voilà mon code:
<tr>
<td>Nom du matériel</td> <td><input type="text" name="nomMateriel" /></td>
</tr>
<tr>
<td>Type du matériel</td> <td><select name="typeMat" onchange="verifTypePeriph()">
<option value=""></option>
<option value="carteReseau">Carte Réseau</option>
<option value="carteGraphique">Carte Graphique</option>
</select></td>
<td>état</td> <td><input type="text" name="etatMateriel" /></td>
</tr>
<tr>
<td><input type="submit" name="ajoutPeripherique" value="Ajouter" /></td>
</tr>
je voudrais que lorsque je sélectionne "carte Réseau", le programme m'affiche avant le bouton submit le champ : <tr><td>Adresse IP</td> <td><input type='text' name='adrIP' /></td></tr>
, pour cela j'ai utilisé la fonction suivante, mais quand je sélectionne j'ai devant moi une page blache qui contient que Adresse IP et le champ text :(
function verifTypePeriph() {
if(document.ajouterPeripherique.typeMat.value == "carteReseau")
document.write("<tr><td>Adresse IP</td> <td><input type='text' name='adrIP' /></td></tr>");
}
SVP quelqu'un peut m'aider ??
Je suis entrain de développer une application en PHP/MySQL, bref, j'ai un formulaire où je voudrais afficher/cacher un champ en fonction de la valeur sélectionnée dans <select><option></option> ... voir plus précisément en bas.
Voilà mon code:
<tr>
<td>Nom du matériel</td> <td><input type="text" name="nomMateriel" /></td>
</tr>
<tr>
<td>Type du matériel</td> <td><select name="typeMat" onchange="verifTypePeriph()">
<option value=""></option>
<option value="carteReseau">Carte Réseau</option>
<option value="carteGraphique">Carte Graphique</option>
</select></td>
<td>état</td> <td><input type="text" name="etatMateriel" /></td>
</tr>
<tr>
<td><input type="submit" name="ajoutPeripherique" value="Ajouter" /></td>
</tr>
je voudrais que lorsque je sélectionne "carte Réseau", le programme m'affiche avant le bouton submit le champ : <tr><td>Adresse IP</td> <td><input type='text' name='adrIP' /></td></tr>
, pour cela j'ai utilisé la fonction suivante, mais quand je sélectionne j'ai devant moi une page blache qui contient que Adresse IP et le champ text :(
function verifTypePeriph() {
if(document.ajouterPeripherique.typeMat.value == "carteReseau")
document.write("<tr><td>Adresse IP</td> <td><input type='text' name='adrIP' /></td></tr>");
}
SVP quelqu'un peut m'aider ??
A voir également:
- HELP problème affichage JavaScript
- Affichage double ecran - Guide
- Problème affichage fenêtre windows 10 - Guide
- Windows 11 affichage classique - Guide
- Problème affichage page internet google chrome - Forum Téléphones & tablettes Android
- Telecharger javascript - Télécharger - Langages
3 réponses
Tu pourrais passé un un span vide :
<td>Type du matériel</td> <td><select name="typeMat" onchange="verifTypePeriph()">
<option value=""></option>
<option value="carteReseau">Carte Réseau</option>
<option value="carteGraphique">Carte Graphique</option>
</select></td>
<td>état</td> <td><input type="text" name="etatMateriel" /></td>
</tr>
<tr><td><span id="ici"></span></td></tr>
<tr>
<td><input type="submit" name="ajoutPeripherique" value="Ajouter" /></td>
Et ta méthode js te donnerai :
function verifTypePeriph() {
if(document.ajouterPeripherique.typeMat.value == "carteReseau")
document.getElementById("ici").innerHTML = "Adresse IP</td> <td><input type='text' name='adrIP' />");
}
<td>Type du matériel</td> <td><select name="typeMat" onchange="verifTypePeriph()">
<option value=""></option>
<option value="carteReseau">Carte Réseau</option>
<option value="carteGraphique">Carte Graphique</option>
</select></td>
<td>état</td> <td><input type="text" name="etatMateriel" /></td>
</tr>
<tr><td><span id="ici"></span></td></tr>
<tr>
<td><input type="submit" name="ajoutPeripherique" value="Ajouter" /></td>
Et ta méthode js te donnerai :
function verifTypePeriph() {
if(document.ajouterPeripherique.typeMat.value == "carteReseau")
document.getElementById("ici").innerHTML = "Adresse IP</td> <td><input type='text' name='adrIP' />");
}
Non, ca ne marchera pas :
Si tu sélectionnes "carteReseau", ca affichera bien ton input text, mais si tu en sélectionne ensuite un autre, l'input sera caché, mais sera toujours présent dans le formulaire, et donc validé lors du submit du formulaire (même s'il est caché)
Il faudrait modifier un peu le else :
} else {
document.getElementById("nomChamp").style.visibility = 'hidden';
document.getElementById("nomChamp").innerHTML = "";
}
Si tu sélectionnes "carteReseau", ca affichera bien ton input text, mais si tu en sélectionne ensuite un autre, l'input sera caché, mais sera toujours présent dans le formulaire, et donc validé lors du submit du formulaire (même s'il est caché)
Il faudrait modifier un peu le else :
} else {
document.getElementById("nomChamp").style.visibility = 'hidden';
document.getElementById("nomChamp").innerHTML = "";
}
function verifTypePeriph() {
if(document.ajouterPeripherique.typeMat.value == "carteReseau") {
document.getElementById("nomChamp").style.visibility = 'visible';
document.getElementById("iciChamp").style.visibility = 'visible';
document.getElementById("nomChamp").innerHTML = "Adresse IP";
document.getElementById("iciChamp").innerHTML = "<input type='text' name='adrIP' />";
} else {
document.getElementById("nomChamp").style.visibility = 'hidden';
document.getElementById("iciChamp").style.visibility = 'hidden';
}
}