Manipuler un formulaire avec jQuery, WTF ?

[ph.gras]

Mon formulaire est généré en PHP et s'affiche sous forme de paires de champs texte associés :

Je souhaite manipuler mon formulaire pour qu'on n'ait pas besoin de le valider, à chaque fois que
l'on ajoute ou supprime une paire de champs texte.

Comme vous l'observez sur l'image, j'arrive bien à ajouter/supprimer des paires de champs, mais
seulement à partir de ceux qui ont déjà été générés en HTML avec PHP.

Si je n'arrive pas à bien manipuler ces champs à la volée, en revanche la validation marche bien…

Quand je compte ces champs dans la console, les nouvelles paires sont bien prises en compte. Je
ne comprends alors pas ce qui empêche un évènement de se produire sur elles !

Code: Tout sélectionner

         $('.vert').click(function(){
            var j = ($(this).parents('tbody').find('tr').length/2);
            $(this).parents('tbody').append(
               '<tr> <td colspan="1"> <label for=" [bla, bla, bla…] vert">[ajouter]</span> </td> </tr>'
            );
            $(this).fadeOut();
            // console.log($(this).parents('tbody').find('tr').length/2);
         });
         $('.rouge').click(function(){
            $(this).parents('tr').prev().remove();
            $(this).parents('tr').remove();
            console.log($(this).parents('tbody').find('tr').length/2);
         });

         // setInterval(function(){
         //   console.log($('.classe_du_tbody tr').length/2);
         // }, 3000);


[Galdon]

Je crois que ça ne fonctionne pas parce que ton code javascript est exécuté au chargement de la page, et tes éléments de formulaire dynamique sont créés après l'exécution de ton code javascript, du coup ils ne sont pas impactés, aucun event listener ($(...).click(...)) ne leur est attribué.

Il y a 2 solutions :

• Soit tu colle un listener manuellement au moment de la création de chaque nouvelle paire de champs, en sélectionnant ces nouveaux éléments avec un sélecteur pour ensuite leur attacher une fonction à l'événement click
• Soit tu utilise une astuce très utile qui consiste à affecter le listener click non pas directement sur les éléments qui déclenchent l’événement (.rouge, .vert) mais sur un élément parent (par exemple l'élément <form> ou une <div> parente), en utilisant ensuite event.target pour déterminer quel est l'élément qui a déclenché l'event (rouge ou vert) pour faire le bon traitement.
  Cette technique est expliquée dans ce tuto vidéo : http://www.grafikart.fr/tutoriels/jquer ... events-518, tu peux regarder @7:30

[ph.gras]

Ouiiiiiiiiiiiii, c'est ça !

Si je comprends bien, .click() est une version simplifiée de .on('click', …) ?

Merci de m'avoir aiguillé sur cette fonctionnalité de JavaScript que je ne
connaissais pas. Maintenant, je m'amuse comme un petit fou ! Parce que
j'ai encore une série de formulaires comme ça à proposer par-dessus .

Bon, cette affaire me pose une question. Quand on modifie le formulaire
dans l'inspecteur du navigateur, j'imagine qu'on peut truander les names
des inputs, et envoyer un truc bizarre à la page PHP de traitement.

Ne serait-il pas nécessaire que je contrôle qui l'envoie par exemple, et à
qui ? Là, j'ai supprimé certaines informations sur les champs… mais elles
seront visibles à celui qui sait lire un code source et il serait à même d'en
tirer avantage de façon malveillante.

[Galdon]

Ne serait-il pas nécessaire que je contrôle qui l'envoie par exemple

Ça c'est vrai tout le temps, c'est la règle de base : Never trust user input (http://stackoverflow.com/questions/2794 ... t-security).