Initialiser un formulaire en fonction d'un radio

**micker** · 20/06/2019, 11h30

hello j'ai un petit soucis de code jquery ...

j'ai un formulaire avec plein de champ le tout piloté via un champ radio

1 si il n'y a rien de choisis alors on affiche cache des champs (initialisation)

2 si on selectionne un champ cela affiche cache des champs (onchange)

3 si on recharge un formulaire il affiche les champs en fonction de la valeur du champ bouton principal(check)

La partie 2-3 fonctionne nikel mais je ne comprend pas comment faire la partie 1

Code :

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

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
( function($) {
$(document).ready(function() {
 
$('input:radio[name="custom[type-de-fiche-annuaire][0]"]:checked').each(function() {
   var valeurInit = $(this).val(); // valeur sélectionnée au chargement de la page
console.log(valeurInit);
 
if(valeurInit === '') {
// ici on affiche le formulaire au chargement si rien n'est checker
}
else if(valeurInit == 'administration') {// si la valeur vaut administration
} 
else if (valeurInit == 'sante') { // si si la valeur vaut sante
}
});
    $('input:radio[name="custom[type-de-fiche-annuaire][0]"]').change(function() { // lorsqu'on change de valeur dans la liste
    var valeur = $(this).val(); // valeur sélectionnée au click
//alert($(this).val());
 
 
if(valeur != '') { // si non vide
} 
else if (valeur == 'sante') { // si la valeur est changée pour sante
}
else if (valeur == 'etascolaire') { // si la valeur est changée pour etablissement scolaire
}else{
}
    });
 
});
} ) ( jQuery );

le consol log ne revoit des infos que quand je change ou que je charge un formulaire ayant déjà une valeur ....

console.log(valeurInit);
j'ai l'impression que mon check

Code :

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

if(valeurInit === '') {

j'ai essayer avec

Code :

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

$('valeurInit').is(':checked'){

n'ai pas bon mais je n'arrive pas a trouvé la bonne approche ...
je suis débutant en js je bidouille beaucoup donc désolé par avance pour l'horreur du code
lol
Merci par avance pour votre aide

**Toufik83** · 20/06/2019, 16h41

Salut,

Envoyé par micker

1 si il n'y a rien de choisis alors on affiche cache des champs (initialisation)

Donc il est bien possible qu'aucun input radio ne soit sélectionné après que la page est chargée, ce qui signifie que ce sélecteur $('input:radio[name="custom[type-de-fiche-annuaire][0]"]:checked') n'est jamais ciblé par jQuery.

Tu peux nous montrer le code html généré, plus précisément celui des input radio ?

**micker** · 21/06/2019, 09h18

hello voici la version light

Code html :

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

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
<form action="" method="post" name="adminForm" id="adminForm" class="form-validate form-horizontal" enctype="multipart/form-data">
 
	....			
						<div id="custom_type-de-fiche-annuaire_0" class="fc_input_set has-pretty-child">
							 <div class="clearfix prettyradio labelright fcradiocheck blue"><input type="radio" id="custom_type-de-fiche-annuaire_0_0" data-element-grpid="custom_type-de-fiche-annuaire_0" name="custom[type-de-fiche-annuaire][0]" data-customclass="fcradiocheck" class="use_prettycheckable custom_type-de-fiche-annuaire_0" value="administration" style="display: none;"><a href="#" class=" "></a>
<label for="custom_type-de-fiche-annuaire_0_0"> Administration</label></div>&nbsp; <div class="clearfix prettyradio labelright fcradiocheck blue"><input type="radio" id="custom_type-de-fiche-annuaire_0_1" data-element-grpid="custom_type-de-fiche-annuaire_0" name="custom[type-de-fiche-annuaire][0]" data-customclass="fcradiocheck" class="use_prettycheckable custom_type-de-fiche-annuaire_0" value="sante" style="display: none;"><a href="#" class=" "></a>
<label for="custom_type-de-fiche-annuaire_0_1"> Santé</label></div>&nbsp; <div class="clearfix prettyradio labelright fcradiocheck blue"><input type="radio" id="custom_type-de-fiche-annuaire_0_2" data-element-grpid="custom_type-de-fiche-annuaire_0" name="custom[type-de-fiche-annuaire][0]" data-customclass="fcradiocheck" class="use_prettycheckable custom_type-de-fiche-annuaire_0" value="assmat" style="display: none;"><a href="#" class=" "></a>
<label for="custom_type-de-fiche-annuaire_0_2"> Assistante maternelle</label></div>&nbsp; <div class="clearfix prettyradio labelright fcradiocheck blue"><input type="radio" id="custom_type-de-fiche-annuaire_0_3" data-element-grpid="custom_type-de-fiche-annuaire_0" name="custom[type-de-fiche-annuaire][0]" data-customclass="fcradiocheck" class="use_prettycheckable custom_type-de-fiche-annuaire_0" value="etascolaire" style="display: none;"><a href="#" class=" "></a>
<label for="custom_type-de-fiche-annuaire_0_3"> Etablissement scolaire</label></div>&nbsp; <div class="clearfix prettyradio labelright fcradiocheck blue"><input type="radio" id="custom_type-de-fiche-annuaire_0_4" data-element-grpid="custom_type-de-fiche-annuaire_0" name="custom[type-de-fiche-annuaire][0]" data-customclass="fcradiocheck" class="use_prettycheckable custom_type-de-fiche-annuaire_0" value="alaealsh" style="display: none;"><a href="#" class=" "></a>
<label for="custom_type-de-fiche-annuaire_0_4"> ALAE / ALSH</label></div>&nbsp; <div class="clearfix prettyradio labelright fcradiocheck blue"><input type="radio" id="custom_type-de-fiche-annuaire_0_5" data-element-grpid="custom_type-de-fiche-annuaire_0" name="custom[type-de-fiche-annuaire][0]" data-customclass="fcradiocheck" class="use_prettycheckable custom_type-de-fiche-annuaire_0" value="association" style="display: none;"><a href="#" class=" "></a>
<label for="custom_type-de-fiche-annuaire_0_5"> Association</label></div>&nbsp; <div class="clearfix prettyradio labelright fcradiocheck blue"><input type="radio" id="custom_type-de-fiche-annuaire_0_6" data-element-grpid="custom_type-de-fiche-annuaire_0" name="custom[type-de-fiche-annuaire][0]" data-customclass="fcradiocheck" class="use_prettycheckable custom_type-de-fiche-annuaire_0" value="acteureconomique" style="display: none;"><a href="#" class=" "></a>
<label for="custom_type-de-fiche-annuaire_0_6"> Acteur économique</label></div>&nbsp; <div class="clearfix prettyradio labelright fcradiocheck blue"><input type="radio" id="custom_type-de-fiche-annuaire_0_7" data-element-grpid="custom_type-de-fiche-annuaire_0" name="custom[type-de-fiche-annuaire][0]" data-customclass="fcradiocheck" class="use_prettycheckable custom_type-de-fiche-annuaire_0" value="equipement" style="display: none;"><a href="#" class=" "></a>
<label for="custom_type-de-fiche-annuaire_0_7"> Equipement</label></div>
 
						</div>					
			....
 
				<button class="btn btn-success" type="button" onclick="return flexi_submit('save', 'flexi_form_submit_btns', 'flexi_form_submit_msg');">
					<span class="fcbutton_save">Ajouter et quitter</span>
				</button>
 
 
			<button class="btn" type="button" onclick="return flexi_submit('cancel', 'flexi_form_submit_btns', 'flexi_form_submit_msg')">
				<span class="fcbutton_cancel">Annuler</span>
			</button>
 
		</div>
 
		<br class="clear">
		<input type="hidden" name="c312dd98d5a1c677d942c10848574472" value="1">		<input type="hidden" name="task" id="task" value="">
		<input type="hidden" name="option" value="com_flexicontent">
		<input type="hidden" name="referer" value="...">
					<input type="hidden" name="jform[type_id]" value="6">
				<input type="hidden" name="jform[id]" id="jform_id" value="0" class="readonly">		
				<input type="hidden" name="jform[submit_conf]" value="cd6b3ddb2f933c48e535751662116ae9">		
		<input type="hidden" name="unique_tmp_itemid" value="_2019_06_21_09_09_00_15d0c828cc5d0e">
 
	</form>

**NoSmoking** · 21/06/2019, 09h30

Bonjour,
avant de continuer je te propose de corriger ton code HTML qui est plein d'erreur.

Pour tester :
↪ Validator

**micker** · 21/06/2019, 10h30

hello merci pour ton retours .. oui je me doute ce n'est qu'un extrait j'ai essayer de le nettoyer pour qu'il soit moins long ... le formulaire en soit fonctionne

**NoSmoking** · 21/06/2019, 12h35

Quoiqu'il en soit, toujours travailler sur un code HTML conforme pour éviter les mauvaises surprises.

Ce que je te propose est de commencer à voir ce que tu obtiens avec

Code :

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

1
2
const elements = $('[name^="custom[type-de-fiche-annuaire][0]"]'); // pourrait être simplifié mais bon ..!
console.log( "elements" ,elements);

et à partir de là tu pourras utiliser ton each.

Initialiser un formulaire en fonction d'un radio

jQuery

Vue hybride

Discussions similaires

Partager

Partager