Ajax manipulation de formulaires

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.

Cours gratuitTélécharger le cours complet

Télécharger aussi :

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *