Suppression d'un champ d'une BDD depuis un tableau PHP

Bonjour à toutes et à tous !

J'ai crée un tableau HTML qui, grâce au PHP, liste tous les utilisateurs de ma base de données. En face de chaque lignes se trouve un bouton de type submit qui permettrait de supprimer l'utilisateur de la BDD.
Le problème, c'est que pour que ça fonctionne, j'aurais besoin de gérer l’événement submit de ce bouton avant qu'il bascule vers la page d'action.
Quelqu'un sait-il comment je pourrais faire ? Ou faut-il que j'utilise une autre méthode comme AJAX dont j'ai entendu parler mais que je ne sais pas utiliser ?

Merci d'avance !

Bonjour,

Tout dépend de ce que tu appelles "gérer" l'événement submit ?

Mais sinon bêtement en jQuery, ça donnerait ça :

$('form').submit(function() {
  // code…
})

Et en VanillaJS (que je ne connais pas beaucoup) ça devrait donner un truc du genre :

[].forEach.call(document.querySelectorAll('form'), function(el) {
  el.addEventListener('submit', function() {
    // code…
  })
})

Modifié par SolidSnake (28 Jun 2017 - 10:13)

Duplication du message non désiré !
Modifié par SolidSnake (28 Jun 2017 - 10:12)

Merci pour ta réponse SolidSnake

Je n'ai pas du bien m'expliquer... Je sais déjà écrire des actions liées à un événement comme tu me l'a montré.

Ce que je souhaite, c'est que lorsque je clique sur le bouton submit de mon formulaire (événement submit), certaines actions soit effectuées en JavaScript AVANT que le formulaire soit envoyé vers le traitement PHP.

Tu serais pas en préparation de projet examen ?

TooKi a écrit :
certaines actions soit effectuées en JavaScript AVANT que le formulaire soit envoyé vers le traitement PHP.

Quelles actions ? le Js et le Php n'ont pas le même but.

mvc, oui en quelque sorte puisque je fais ce site dans le cadre de mon stage de première année de BTS SIO.

JENCAL, enfaite, je voudrais que lorsque je clique sur l'un des boutons supprimer de mon tableau, JavaScript récupère les informations de la ligne pour les placer dans des inputs cachés que PHP pourra récupérer pour savoir quel utilisateur supprimer de la BDD.

Tout se fait par défaut, le JS "rend la main" après un return true;

Ici un petit tuto de Grafikart sur la validation d'un formulaire avec jQuery

Ok je vois, mais pourquoi les mettres en javascript dans des inputs caché ?

Si tu code ça en Ajax, lorsque tu cliques sur le boutton delete la ligne est delete en même pas 1 secondes sans recharger la pages.

Merci SolidSnake mais ce n'est pas vraiment ce que je cherche à faire.

Ah on y vient JENCAL , c'est pour ça que j'ai demandé dans mon premier post si ma méthode était la bonne ou s'il fallait que j'utilise AJAX dont j'ai entendu parler mais que je ne sait pas utiliser... J'ai déjà regarder des tutos mais ils ne ciblent pas assez mon cas et j'ai du mal à les comprendre...
Si je te partage mon code, voudrais-tu me guider dans le codage AJAX ? (sans me mâcher tout le travail bien-sur) ^^

Tout le monde est prêt à te guider

Cool ! Alors voici mon code

<form method="post"	action="gestionnaire_utilisateurs.php" id="setUsrForm"> 
	<table>
		<tr>
		    <th> Nom </th>
		    <th> Prénom </th>
		    <th> Action </th>
		</tr>

		<?php
			try
			{ 
			    // connexion à la base
			    $bdd = new PDO('mysql:host=localhost;dbname=conservatoire;charset=utf8', 'root', '', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));  
			}

			catch (Exception $e)
			{
			    die('Erreur : ' . $e->getMessage());
			}

			$utilisateursBDD = $bdd->query('SELECT * FROM utilisateurs WHERE Administrateur = 0');

			foreach ($utilisateursBDD as $i => $row) 
			{
		?>
				<tr id="<?php echo $i; ?>">
					<td class="sNames">
						<p class="sNamesView"><?php print $row['NomUtilisateur']; ?></p>
					</td>

					<td class="fNames">	
						<p class="fNamesView"><?php print $row['PrenomUtilisateur']; ?></p>						
					</td>

					<td>
						<button type="submit" name="delButton" title="Supprimer"></button>
					</td>
				</tr>							
		<?php			
			}
		?>
	</table>
</form>

Modifié par TooKi (28 Jun 2017 - 14:31)

Ok donc si j'ai bien compris, je dois enlever le type="submit" de mon bouton supprimer, lui affecter un événement onclick qui appellera le script AJAX qui doit ouvrir la requête SQL écrite dans une page action.php a qui on envoie via le script AJAX les variables contenant les données de lignes récupérées dans le tableau ???

Juste pour savoir si je suis sur la bonne voie ou si je patauge

Bonjour.

TooKi a écrit :
Ok donc si j'ai bien compris, je dois enlever le type="submit" de mon bouton supprimer, lui affecter un événement onclick…

Pas besoin. Il suffit juste de rendre son comportement par défaut inopérant.
On peut écouter l'événement "submit" sur le formulaire, et, par exemple, avec DOM-2, faire un event.preventDefault(); (event est arbitraire, on reprend l'argument de la fonction passée en paramètre à addEventListener.)

OK Zelena mais si je fait comme ça, je ne pourrait pas récupérer le numéro de la ligne, si ? D'autant plus que mon formulaire à d'autres boutons submit que je ne veux pas bloquer...

Hum… vous devriez revoir ou voir les bases du Javascript.

Pour tester si un élément a une classe, c'est :
element.className et non element.class

ensuite

if (clickEl.class = 'delButtons')

n'est pas une comparaison, c'est une affectation. C'est :

if (clickEl.class == 'delButtons')

qui est une comparaison.

Ah mais oui je le savais en plus... Merci Zelena ça fonctionne et c'est beaucoup plus propre.
Maintenant pour en revenir à la solution de JENCAL, ma console m'affiche ReferenceError: getXMLHttpRequest is not defined
Pourquoi ?
Modifié par TooKi (29 Jun 2017 - 11:33)