Initialisé un formulaire en fonction d'un radio

micker

19 juin 2019 à 16:52:02

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

( 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

if(valeurInit === '') {

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

-
Edité par micker 19 juin 2019 à 16:52:27

piero5673

19 juin 2019 à 17:51:58

Bonjour,

tu ne fais aucun test pour voir si il y a rien de ckecké, pour passer dans ton if qui test si la valeur est vide, il faut que l'input soit checké.

Si tu as des groupes d'inputs (plusieurs inputs avec le même attribut name), tu peux faire quelque chose du genre : https://codepen.io/anon/pen/MMbmoV?&editable=true

De manière générale, === c'est mieux que ==.

micker

19 juin 2019 à 21:12:45

desoler je ne comprend ton exemple exemple ...

j'ai essayer de faire un

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

.. mais pareil

piero5673

20 juin 2019 à 13:10:58

Dans l'exemple, tous les inputs ont la même valeur pour l'attribut name, et ils sont tous dans un formulaire. Pour savoir quel est l'input sélectionné, il suffit de sélectionner le formulaire, et de profiter de la hashtable qu'il contient : form.inputName = valueInputChecke. En plus, au lieu de mettre un évènement sur tous les inputs, tu peux mettre un évènement sur le formulaire.

-
Edité par piero5673 20 juin 2019 à 13:13:31

micker

20 juin 2019 à 14:41:06

ok voici mon element

<div id="container_fcfield_98">
    <div><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"><a href="#" class=" "></a>
<label for="custom_type-de-fiche-annuaire_0_0"> Administration</label><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;">
<label for="custom_type-de-fiche-annuaire_0_1"> Santé</label><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;">	
     </div>			
</div>

piero5673

20 juin 2019 à 15:04:05

Je vois 3 inputs, avec le même nom, comme dans l'exemple, mais pas de formulaire. Pourtant c'est bien les formulaires. Si tu veux faire un formulaire sans formulaire, il faut tout recoder à la main. Ca veut dire qu'il faut que tu aille sélectionner tous tes inputs et vérifier si chaque input est checké ou non.

micker

21 juin 2019 à 9:14:07

hello voici ma version light avec le formulaire

<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>