Manipuler un formulaire avec jQuery, WTF ?

Toutes vos questions sur jQuery, CSS, HTML5, mise en page...
ph.gras
Addict
Addict
 
Messages: 71
Inscription: 23 Juin 2013, 13:39

Manipuler un formulaire avec jQuery, WTF ?

Messagede ph.gras » 08 Déc 2015, 17:04

Mon formulaire est généré en PHP et s'affiche sous forme de paires de champs texte associés :
Image
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);

Avatar de l’utilisateur
Galdon
Administrateur du site
Administrateur du site
 
Messages: 2180
Inscription: 06 Sep 2008, 22:05

Re: Manipuler un formulaire avec jQuery, WTF ?

Messagede Galdon » 08 Déc 2015, 19:43

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
"Si tu veux me parler, envoie-moi un... FAX !" - George Abitbol

ph.gras
Addict
Addict
 
Messages: 71
Inscription: 23 Juin 2013, 13:39

Re: Manipuler un formulaire avec jQuery, WTF ?

Messagede ph.gras » 09 Déc 2015, 20:03

Ouiiiiiiiiiiiii, c'est ça :D !

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.

Avatar de l’utilisateur
Galdon
Administrateur du site
Administrateur du site
 
Messages: 2180
Inscription: 06 Sep 2008, 22:05

Re: Manipuler un formulaire avec jQuery, WTF ?

Messagede Galdon » 09 Déc 2015, 21:27

ph.gras a écrit: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).
"Si tu veux me parler, envoie-moi un... FAX !" - George Abitbol


Retourner vers HTML / CSS / Javascript

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité