Manipulation de formulaires
Ajouter dynamiquement un champ à un formulaire en fonction de la valeur d’un autre
Créons un nouveau contrôleur « my_form » ». Remplissons le fichier « index.rhtml » comme suit :
index.rhtml
<%= form_tag :action=>’index’ %> <label>Sexe :</label> <%= text_field(‘profile’, ‘sexe’) %> <div id= »celibataire »>-</div> <%= observe_field ‘profile_sexe’, :url=>{:action=>’check_ajout_form’}, :update=> »celibataire », :with => « ‘sexe=’ + escape(value) » %> <%= end_form_tag %>
Dans la première partie de ce code, nous nous contentons de définir un formulaire, et d’insérer un div qui fera office de receveur pour notre appel AJAX.
Le point important ici est le « observe_field », qui va nous créer un observateur, chargé de réagir quand un évènement se produira sur notre champ « profile_sexe » (ici, la perte de focus).
Nous lui passons en premier paramètre l’id du champ à observer.
Puis, nous définissons l’action à laquelle se référer lors d’un évènement, ainsi que l’id de l’élément à modifier au retour de l’appel AJAX.
Enfin, nous lui passons en paramètre la valeur du champ observé.
Dans notre contrôleur, définissons l’action « check_ajout_form » :
check_ajout_form
def check_ajout_form user_sexe = params[:sexe] if user_sexe == « femme » render :partial => « celibataire_form » else render :text => « Les hommes ne m’interessent pas ! » end end
Enfin, définissons le partiel « _celibataire_form.rhtml » :
_celibataire_form.rhtml
<label>Etes-vous célibataire ?</label> <%= text_field(‘profile’, ‘celibataire’) %>
Testez à présent votre contrôleur.
Si vous saisissez « femme » dans votre champ « sexe », un nouveau champ apparait.