Discussion :

[Invité]

Bonjour,
J'ai un formulaire html dans lequel j'aimerais que certains champs (input, textarea...) soit visibles et d'autres cachés en fonction d'un choix dans une liste déroulante. J'ai déjà commencé mon script mais je coince au moment de sélectionner en jquery les :input qui on comme data-attribut, la valeur sélectionnée dans ma liste déroulante.

Voici mon formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<form method="POST" action="form.php">
	<input type="text" name="libelle" placeholder="Libelle" />
	<select name="template">
		<option value="1">texte</option>
		<option value="2">image</option>
		<option value="3">image-texte</option>
		<option value="4">texte-image</option>
	</select>
	<input type="text" class="filter" name="image" data-filter="["image", "texte-image", "image-texte"]" />
        <textarea type="text" class="filter" name="texte" data-filter="["texte", "texte-image", "image-texte"]"></textarea>
	<input type="submit" value="valider" />
</form>

Malgré d'autres recherches sur internet, je n'arrive pas à utiliser un sélecteur qui agit sur l'attribut data-filter en sachant qu'il a plusieurs valeurs.

Voici mon début de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
$('select[name=template]').change(function(){
	var filter = $(this).find($('select[name=template] option:selected')).text();
	console.log(filter);
 
	//Jusqu'ici ça marche
});

Après je sais pas comment faire pour cacher avec la fonction hide() tous les champs :input qui on dans leur attribut data-filter la chaine contenue dans la variable filter.

J'espère vous avoir donné assez de précision pour m'aider, merci d'avance !

[Invité]

Bonjour,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<form method="POST" action="form.php">
	<input type="text" name="libelle" placeholder="Libelle" />
	<select name="template">
		   <option value="1">texte</option>
				   <option value="2">image</option>
				   <option value="3">image-texte</option>
				   <option value="4">texte-image</option>
	</select>
	<input type="text" class="filter" name="image" data-filter="image,image-texte,texte-image" />
<textarea type="text" class="filter" name="texte" data-filter="texte,image-texte,texte-image"></textarea>
	<input type="submit" value="valider" />
</form>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$('select[name=template]').on('change',function(){
	var filter = $('select[name=template] option:selected').text();
  $('input, select, textarea').each(function(){
     var datas = $(this).attr('data-filter');
     if( datas ){
        if( $.inArray( filter, datas.split(',') ) ){
          $(this).show();
        } else {
          $(this).hide();
        }
     }
  });
});

Ou, en utilisant les value au lieu du texte :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<form method="POST" action="form.php">
	<input type="text" name="libelle" placeholder="Libelle" />
	<select name="template">
		   <option value="1">texte</option>
		   <option value="2">image</option>
		   <option value="3">image-texte</option>
		   <option value="4">texte-image</option>
	</select>
	<input type="text" class="filter" name="image" data-filter="2,3,4" />
<textarea type="text" class="filter" name="texte" data-filter="1,3,4"></textarea>
	<input type="submit" value="valider" />
</form>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$('select[name=template]').on('change',function(){
	var filter = $('select[name=template] option:selected').val();
  $('input, select, textarea').each(function(){
     var datas = $(this).attr('data-filter');
     if( datas ){
        if( $.inArray( filter, datas.split(',') ) ){
          $(this).show();
        } else {
          $(this).hide();
        }
     }
  });
});

[Invité]

Merci jreaux62, je viens de tester ton code et il marche (à moitié).
Tu peux regarder sur le lien suivant et tester le formulaire, tu verras que au lieu de me sortir le champ "texte", il me sort le champ "image" et inversement.

https://jsfiddle.net/hxgcqmjc/

Merci encore pour ton aide !

[danielhagnoul]

Il suffit d'inverser hide() et show() : https://jsfiddle.net/hxgcqmjc/1/

[Invité]

Oui j'ai bien essayé auparavant, mais du coup le choix de "texte-image" ou "image-texte" ne marche pas.

[Invité]

Utilise la version avec les value.

[Invité]

Merci pour vos réponses, sujet résolu !