Afficher/Masquer élément au chargement dans un formulaire dynamique [Résolu]

[titinesaku]

Bonjour,

Je me tourne vers vous car je cherche en vain une solution à mon problème...
J'ai un formulaire généré de cette manière:

Code php :

1
2
3
4
5
6
7
8
9
10
 
foreach($tab as $key=>$val)
{							
	echo '<select name="'.$key.'" onChange="autre(this,\''.$key.'\')">';
	foreach($val as $cle=>$donnee)
	{
		echo '<option value="'.$donnee.'">'.$donnee.'</option>';
	}
	echo '</select><input type="text" name="autre_'.$key.'" id="autre_'.$key.'" class="hide"/>';
}

En gros on obtient une succession de select qui ont cette forme :

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<select name="nom" onChange="autre(this,'nom')">
	<option value="dupont">Dupont</option>
	<option value="dubois">Dubois</option>
	<option value="Autre">Autre</option>
</select>
<input type="text" name="autre_nom" id="autre_nom" class="hide"/>
 
<select name="prenom" onChange="autre(this,'prenom')">
	<option value="jean">Jean</option>
	<option value="paul">Paul</option>
	<option value="Autre">Autre</option>
</select>
<input type="text" name="autre_prenom" id="autre_prenom" class="hide"/>
...

Lorsque l'on sélectionne "Autre", le input type text apparait grâce à ma fontion autre()

Code javascript :

1
2
3
4
5
6
7
8
9
10
11
12
 
function autre(select,nom)
{
	if(select.options[select.selectedIndex].value == "Autre")
	{
		document.getElementById('autre_'+nom).style.visibility = 'visible';
	}
	else
	{
		document.getElementById('autre_'+nom).style.visibility = 'hidden';
	}
}

CSS de l'input

Code css :

1
2
3
4
5
.hide
{
	visibility:hidden;
	width:300px;
}

Ça ça fonctionne pas de soucis. Le problème c'est que lorsque l'on a sélectionné "Autre" et que l'on recharge la page (F5) avant d'avoir validé le formulaire et bien le champ input est de nouveau caché => css

Est-ce qu'il existerait un moyen de contrôler tous les select au chargement de la page pour faire apparaitre les champs "Autre" étant donné que le nombre de select est variable et leur id également (autre_'.$key') ? Ou bien alors une autre solution pour éviter que les champ disparaissent au rechargement de la page ? Merci d'avance.

[andry.aime]

Bonjour,

Sauvegarde la visibilité des éléments dans un cookie.
Je pense que c'est mieux aussi d'utiliser "style.display" à la place de style.visibility.

A+.

[titinesaku]

Tout à fait d'accord pour le style.display, j'avais utilisé style.visibility à cause d'un soucis d'alignement des éléments en css. Autrement je vais me renseigner pour le cookie, j'aurais préféré éviter d'utiliser cette méthode. Merci quand même

[Bovino]

Le problème c'est que lorsque l'on a sélectionné "Autre" et que l'on recharge la page (F5) avant d'avoir validé le formulaire et bien le champ input est de nouveau caché => css

Logiquement, lorsqu'on recharge la page (appuyer sur F5 est rarement fait par hasard), c'est bien qu'on ne veut pas conserver les choix déjà faits, du coup, ce que tu demandes me semble aller à l'encontre des choix de l'utilisateur et donc à éviter...

[titinesaku]

Merci pour vos réponses, c'est vrai que je me complique un peu la vie
Et bien alors lorsque la personne fait F5 j'aimerais que les select reviennent à leur valeur par défaut (selected="selected") ce qui n'est pas le cas actuellement... J'ai essayé onload="document.formulaire.reset()" mais sans succès. J'explique de nouveau le soucis :

Code html :

1
2
3
4
5
6
 
<select name="'.$key.'" onChange="autre(this)">
	<option value="dupont" selected="selected">Dupont</option>
	<option value="dubois">Dubois</option>
	<option value="autre">Autre</option>
</select>

Je sélectionne "Autre", un input type text apparait. Je fais F5, l'input type text disparait et le select reste à "Autre"...

Une idée ?

[andry.aime]

Le seul moyen (que je sache) c'est utilisé du cookie pour sauvegarder les valeurs et les récupérer lors du onload du body pour faire une restauration.

[titinesaku]

Bon et bien j'ai résolu le problème en mettant ceci à la fin de mon code html

Code html :

<script type="text/javascript">document.forms.formulaire.reset();</script>

Le onload=document.forms.formulaire.reset(); dans le body ne marchait pas.

[andry.aime]

Et ça restaure les données déjà saisie quand on fait F5 sur tous les navigateurs ça . J'aimerai bien voir ça un jour .

[bewidia]

Tu es sûr que ce n'est pas un problème de cache ? Il m'arrive souvent de choisir une valeur de mon select, de faire F5 sous Firefox, et de retrouver la page avec la valeur choisie. Je dois faire un ctrl-F5 pour que la valeur par défaut se rétablisse.

[titinesaku]

@andry.aime : ben le but est de remettre à zéro donc bon pour le moment sur Firefox, Chrome et Opera ça roule, j'essaye de tester sous IE dès que j'aurais une image disque pour ma machine virtuelle (suis sous Ubuntu).

@bewidia : Tout à fait mais les utilisateurs n'auront peut être pas le réflexe de faire ctrl+F5 pour recharger leur page

[andry.aime]

Envoyé par titinesaku

@andry.aime : ben le but est de remettre à zéro

Je ne sais pas si j'ai mal compris le problème initial ou tu t'es mal exprimé, mais bon, l'essentiel c'est que tu as résolue ton problème.

[titinesaku]

En fait j'ai pris en compte la remarque de Bovino qui disait que si la personne fait F5 c'est qu'elle ne souhaite pas garder les données entrées dans le formulaire, on affiche les données par défaut => selected="selected"
Enfin voilà, merci à vous