[JavaScript] Cacher ou afficher des div
bZx
-
bZx -
bZx -
Bonjour,
J'ai un problème sur lequel je bloque (par manque de someil probablement) en javascript et le pire c'est que c'est tout bête:
J'ai un formulaire dans lequel on peut sélectionner un nombre de personne et en fonction de ce nombre (1 à 4) choisi on affiche des champs "Age de la première personne", ...
Voici l page très épurée:
<html><head>
<script type="text/javascript">
function test()
{
objrecup=window.document.getElementById("nbA").value;
var i
for (i=0;i<=objrecup;i++){
objachange=window.document.getElementById("diva"+i).style
obj.visibility='visible'
}
for (;i<=4;i++){
obj.visibility='display: none';
}
}
</script>
</head><body>
<form action="?r=content&a=show&i=6&j=1" accept-charset="UNKNOWN" enctype="application/x-www-form-urlencoded" method="post">
<table class="fond_news" border="0" cellpadding="6" cellspacing="0">
<tbody>
<tr>
<td class="news_entete" style="text-align: left;">Formulaire</td>
</tr>
<tr>
<td style="text-align: left;">Nombre d'adultes</td>
<td><select name="nbA" id="nbA" onChange="javascript:test();">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<div id="divA1">
<tr>
<td>Age du premier adulte</td>
<td><input type="text" maxlength="2" size="52" name="ageA1"/></td>
</tr>
</div>
<div id="divA2">
<tr>
<td>Age du second adulte</td>
<td><input type="text" maxlength="2" size="52" name="ageA2"/></td>
</tr>
</div>
<div id="divA3">
<tr>
<td>Age du troisième adulte</td>
<td><input type="text" maxlength="2" size="52" name="ageA3"/></td>
</tr>
</div>
<div id="divA4">
<tr>
<td>Age du quatrième adulte</td>
<td><input type="text" maxlength="2" size="52" name="ageA4"/></td>
</tr>
</div>
</tbody>
</table>
</form>
</body></html>
J'ai un problème sur lequel je bloque (par manque de someil probablement) en javascript et le pire c'est que c'est tout bête:
J'ai un formulaire dans lequel on peut sélectionner un nombre de personne et en fonction de ce nombre (1 à 4) choisi on affiche des champs "Age de la première personne", ...
Voici l page très épurée:
<html><head>
<script type="text/javascript">
function test()
{
objrecup=window.document.getElementById("nbA").value;
var i
for (i=0;i<=objrecup;i++){
objachange=window.document.getElementById("diva"+i).style
obj.visibility='visible'
}
for (;i<=4;i++){
obj.visibility='display: none';
}
}
</script>
</head><body>
<form action="?r=content&a=show&i=6&j=1" accept-charset="UNKNOWN" enctype="application/x-www-form-urlencoded" method="post">
<table class="fond_news" border="0" cellpadding="6" cellspacing="0">
<tbody>
<tr>
<td class="news_entete" style="text-align: left;">Formulaire</td>
</tr>
<tr>
<td style="text-align: left;">Nombre d'adultes</td>
<td><select name="nbA" id="nbA" onChange="javascript:test();">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<div id="divA1">
<tr>
<td>Age du premier adulte</td>
<td><input type="text" maxlength="2" size="52" name="ageA1"/></td>
</tr>
</div>
<div id="divA2">
<tr>
<td>Age du second adulte</td>
<td><input type="text" maxlength="2" size="52" name="ageA2"/></td>
</tr>
</div>
<div id="divA3">
<tr>
<td>Age du troisième adulte</td>
<td><input type="text" maxlength="2" size="52" name="ageA3"/></td>
</tr>
</div>
<div id="divA4">
<tr>
<td>Age du quatrième adulte</td>
<td><input type="text" maxlength="2" size="52" name="ageA4"/></td>
</tr>
</div>
</tbody>
</table>
</form>
</body></html>
1 réponse
-
Salut
Script non testé :
<script type="text/javascript">
function test()
{
var objrecup=document.getElementById("nbA").value;
var i;
for (i=1;i<=4;i++)
{
if(i<=objrecup)
{
var objachange=document.getElementById("divA"+i);
objachange.style.display='block';
}
else
{
objachange.style.display='none';
}
}
}
</script>
Cdlt
IC-
-
[Résolu] J'ai trouvé c'était le même problème que dans ce post:
https://forums.commentcamarche.net/forum/affich-7089573-fonction-display-en-javascript
Pour que la mise à jour fonctionne la liste déroulante ne doit pas être dans le même tableau que les div !
-
