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)

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

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)

alors pour rappel, le but d'ajax est d'appeler du php sans rafraichir la page :

donc structurellement parlant le but est d'extraire le php en question dans une page action.php (ou autre name) et d'extraire le js dans un script.js et le html dans un index.php.

Pour ajax il y a deux type d'ajax, l'ajax PURE javascript et l'ajax jquery ... voici le pure javascript :

ici , la fonction classic

function getXMLHttpRequest() {
	var xhr = null;
	
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
	
	return xhr;
}

et ensuite je préconise l'envoie en POST (cacher)

var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                alert(xhr.responseText); // ET ICI tu gére le résultat, le retour de ton PHP
        }
};
xhr.open("POST", "action.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("variable1=truc&variable2=bidule");

et c'est tout.
Si tu galère reviens ici.
Modifié par JENCAL (28 Jun 2017 - 14:38)

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

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.