Discussion :

[clisson]

Bonjour,

Dans une form, je souhaite ajouter un événement onBlur à un champ qui aurait pour objet de renseigner ce champ, s'il est vide, à partir du contenu d'un autre champ de la même form. J'ai donc besoin de récupérer l'id du champ à récupérer (ou son nom).

Quand c'est une form en "standalone", c'est simple, l'id est généré à partir du getName() et du champ. Mais dans le cas d'une form imbriquée, ça l'est moins...

Y a-t-il un moyen générique de récupérer l'id d'un champ dans l'objet form ?

Merci d'avance

[arnooo999]

Code :

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

1
2
3
4
5
 
//récupérer l'id d'un formulaire
{{form.vars.id}}
//récupérer l'id d'un champ du formulaire
{{form.champ.vars.id}}

Cela dit tu peux retrouver ton champ par d'autre sélecteur que l'attribut id (le mélange balise twig + code javascript c'est quand même imbuvable!).

Code :

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

1
2
3
4
5
6
7
8
9
 
<div class="field_container">
{{form_widget(form.champ)}}
</div>
<script>
$('.field_container input').blur(function(){
 
});
</script>

Code :

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

1
2
3
4
5
6
7
 
{{form_widget(form.champ,{'attr':{'class':'foo'}})}}
<script>
$('.foo').blur(function(){
 
});
</script>

[clisson]

Merci pour la réponse, mais je n'ai pas tout compris... (rien, en fait )

Je suis bien d'accord que

e mélange balise twig + code javascript c'est quand même imbuvable!

, mais ce n'est pas au niveau du twig que je souhaitais mettre quelque chose, mais dans la description du champ, genre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$blurNomNaissance="if (this.value=="" ) this.value=$("'.$this->getId('nomUsuel').'").value;"
 
$builder ->add('nomNaissance','text',array(
                                        'label' => 'Nom naissance',
                                        'max_length' =>25,
                                        'required' => true,
                                        'attr'=>array(
                                                'size'=>25,
                                                'onBlur'=>$blurNomNaissance
                                         )
                                    )
        )

Et c'est la fonction getId(champ) qui me manque.

Mais si tu m'aides à comprendre ta solution, je veux bien la prendre

[arnooo999]

voici ce que j'aurai fait :

le code php du formulaire

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$builder
->add('nomUsuel','text', array('attr'=>array('class'=>'field_nom_usuel'))) //ajout d'une class au widget
->add('nomNaissance','text',array(
                                        'label' => 'Nom naissance',
                                        'max_length' =>25,
                                        'required' => true,
                                        'attr'=>array(
                                                'size'=>25,
                                                'class'=>'field_nom_naissance' //ajout d'une class au widget
                                         )
                                    )
        )

le code javascript en utilisant jquery

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$.ready(function(){
 
//on utilise les class pour identifier les input  (plutot que les id)
 $('.field_nom_naissance').blur(function(){
      if(this.value==""){
          this.value=$(".field_nom_usuel'").value;
      }
 });//fin on blur
 
});//fin on ready

en gardant le code javascript directement dans le formulaire

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
 
$blurNomNaissance="if (this.value=="" ) this.value=$('.field_nom_usuel').value;"
 
$builder
->add('nomUsuel','text', array('attr'=>array('class'=>'field_nom_usuel'))) //ajout d'une class au widget
 ->add('nomNaissance','text',array(
                                        'label' => 'Nom naissance',
                                        'max_length' =>25,
                                        'required' => true,
                                        'attr'=>array(
                                                'size'=>25,
                                                'onBlur'=>$blurNomNaissance
                                         )
                                    )
        )

Par contre ce que j'ai cru comprendre c'est que tu utilises un embeded form.
Est-ce que c'est un inclus dans une collection et donc est-ce que tu as plusieurs champs nomNaissance et nomUsuel dans ta page Html?
dans ce cas le code js serait:

Code :

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

1
2
3
4
 
if(this.value==''){
this.value=$(this).parents('selecteur_du champ_civilite').find('.field_nom_usuel').val();
}

[clisson]

Merci, c'est effectivement beaucoup plus clair pour moi maintenant.

C'est vrai que c'est plus simple en utilisant un sélecteur que l'on génère plutôt qu'un id sur lequel on n'a pas la main.

Je n'utilisais pas jquery jusqu'ici, mais il y a un début à tout :-). Je suppose que c'est nécessaire pour accéder à un élément par sa class ? A moins de trouver une fonction getElementsByClassName, et ça a l'air d'exister...


Merci encore.

[arnooo999]

la fonction document.getElementsByClassName (et même document.querySelector() ) est implémentée dans de nombreux navigateurs, mais pour le moment il reste préférable d'utiliser des librairies tel que jquery pour avoir le maximum de navigateurs compatible avec ton appli.

penses au résolu!

[clisson]

Oui, j'ai trouvé une fonction getElementsByClassName qui fait ce qu'il faut, et tout fonctionne.

Pour répondre à ta dernière question, c'est bien un formulaire embedded, mais en OneToOne, donc pas de collection.

Merci, et à la prochaine question...