Connaître l'id d'un champ dans une form

Version imprimable

16/03/2012, 10h33
clisson

Connaître l'id d'un champ dans une form

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

Code:

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:

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:

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

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

Je suis bien d'accord que

Citation:

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:

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

voici ce que j'aurai fait :

le code php du formulaire

Code:

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:

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:

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:

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

16/03/2012, 14h15
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.
16/03/2012, 14h43
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!
16/03/2012, 15h00
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...