Plusieurs FORM, un seul AJAX

Par Hexa, il y a 9 mois

PHP
Base de données MySQL
Javascript

Bonjour,
je récupère une liste d'élèves en base de données et je les affiche sur une seule page.
Chaque élève est dans une DIV dans laquelle il y a un formulaire.

Donc, le nombre de formulaires varie mais chaque formulaire a son propre ID unique.

Extrait de mon code php qui est dans une boucle While (mySql select):

<form id="formEleve-<?php echo $idEleve; ?>"> <div class="form-group"> <label for="nomEleve">Nom</label> <input type="text" class="form-control" id="nomEleve" value="<?php echo $nomEleve; ?>"> </div> <div class="form-group"> <label for="prenomEleve">Prénom</label> <input type="text" class="form-control" id="prenomEleve" value="<?php echo $prenomEleve; ?>"> </div> <div class="form-group"> <label for="choixEleve">Choix</label> <input type="text" class="form-control" id="choixEleve" value="<?php echo $choixEleve; ?>"> </div> <button type="submit" class="btn btn-primary">Envoyer</button> </form>

Le code de traitement en AJAX qui lui, est unique:

$('#formEleve-<?php echo $idEleve; ?>').submit(function(e) { e.preventDefault(); var nomEleve = $('#nomEleve').val(); var prenomEleve = $('#prenomEleve').val(); var choixEleve = $('#choixEleve').val(); $.ajax({ type: "POST", url: 'assets/inc/updateEleve.php', data: $(this).serialize(), success: function(json) { location.reload(); } }); });

Vous l'avez compris, ça ne fonctionne que sur un seul formulaire!

Comment dire au code AJAX que l'ID du formulaire a changé?
Ou comment traiter le formulaire que l'on veut avec un seul code ajax?

Merci pour votre aide.

5 réponses

Soundboy39, il y a 9 mois

Bonjour,

Chaque "id" doit être unique dans un document html, c'est bien géré pour la balise <form>, mais ça doit être également le cas pour les <input>.

Pour la requete Ajax, je pense qu'il vaudrait mieux sélectionner l'ensemble des formulaires avec $('form') puis écouter le "submit" pour chaque formulaire.

Hexa, il y a 9 mois

Salut,
merci pour ta réponse Soundboy mais je n'y arrive pas.
Chaque formulaire a son propre ID. Chaque INPUT a son propre ID aussi.

Je ne comprend pas comment je peux faire pour que AJAX soit appelé avec le formulaire que j'ai rempli sur ma page.
Je tourne en rond à en devenir dingue. Je suis sûr que la solution est devant mon nez mais je n'y arrive pas!

Un coup de pouce avec un code fonctionnel serait le bienvenu...!

slabb (IA), il y a 9 mois

Résumé pragmatique
• Pas d’ID dupliqués sur les inputs
• Ajoute une classe commune sur les formulaires
• Un seul handler jQuery pour tous les formulaires
• .serialize() suffit à tout envoyer correctement (si chaque champ a bien un name)
• Le champ caché idEleve te permet de savoir quel élève est modifié

→ Ça marche pour n’importe quel nombre de formulaires, n’importe quel ID d’élève, sans duplication ni bidouillage.

<?php while ($row = $result->fetch_assoc()): ?> <form class="formEleve" data-id="<?php echo $row['id']; ?>"> <div class="form-group"> <label>Nom</label> <input type="text" class="form-control" name="nomEleve" value="<?php echo $row['nom']; ?>"> </div> <div class="form-group"> <label>Prénom</label> <input type="text" class="form-control" name="prenomEleve" value="<?php echo $row['prenom']; ?>"> </div> <div class="form-group"> <label>Choix</label> <input type="text" class="form-control" name="choixEleve" value="<?php echo $row['choix']; ?>"> </div> <input type="hidden" name="idEleve" value="<?php echo $row['id']; ?>"> <button type="submit" class="btn btn-primary">Envoyer</button> </form> <?php endwhile; ?> $(document).on('submit', '.formEleve', function(e) { e.preventDefault(); var $form = $(this); $.ajax({ type: "POST", url: 'assets/inc/updateEleve.php', data: $form.serialize(), success: function(json) { location.reload(); } }); });

Ça, c’est propre, scalable et prêt pour la prod.

Hexa, il y a 9 mois

Merci infiniement Slabb, tout fonctionne!
Effectivement, à un moment donné de mes essais je n'étais pas loin de la solution.

Ton exemple m'a permis de comprendre.
Je vois un peu plus clair sur le serialize également.

Pourquoi mets-tu <?php endwhile; ?> à la fin de ta boucle while? J'ai l'habitude de mettre une simple accolade fermante... C'est pas bon?

slabb (IA), il y a 9 mois

De rien, content que ça marche !

Pour ta question sur <?php endwhile; ?> :
C’est juste une autre façon de fermer la boucle en PHP quand tu utilises la syntaxe alternative (utile avec du HTML imbriqué).

Tu peux écrire :

<?php while ($row = $result->fetch_assoc()): ?> <!-- ton HTML --> <?php endwhile; ?>

Ou alors la syntaxe classique :

<?php while ($row = $result->fetch_assoc()) { ?> <!-- ton HTML --> <?php } ?>

Les deux fonctionnent exactement pareil.
La version : ... endwhile; est plus lisible dans les vues quand tu mixes beaucoup PHP/HTML.

Aucun impact sur le code, c’est juste une question de style et de lisibilité.

Conseil pour la suite :
Si tu veux un code vraiment propre et maintenable, évite de trop mélanger PHP et HTML.
Utilise un moteur de template dédié (genre Twig, Blade, etc.), c’est plus clair, sécurisé, et tu sépares bien logique et affichage.
Symfony fonctionne nativement avec Twig par exemple.

Ça fait gagner du temps sur les gros projets… et ça évite de se perdre dans les balises PHP ouvertes/fermé