Gestion d'événements sur bouton

**moimp** · 23/02/2019, 11h54

Bonjour à tous,

Je me demande si j'arriverai un jour à gérer correctement les événements. Parfois je désespère.
Voici un extrait de mon code html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form method="post" action="" class="L editGroups">
	<label for="id"><?= EDIT_GRP_LBL_GROUPS; ?></label><?= $lstGroups; ?>
	<?php if ( isset($visible) ): ?>
		<input type="hidden" name="id_user" value="<?= $idUser; ?>" />
		<p><label for="text"><?= EDIT_GRP_LBL_GROUP; ?></label><input type="text" name="text" id="text" value="<?= $toSave['text']; ?>" /></p>
		<p>
			<input type="submit" name="save" value="<?= BTN_SAVE; ?>" />
			<input type="submit" name="erase" value ="<?= BTN_ERASE ?>" />
			<input type="submit" value="<?= BTN_BACK_PAGE; ?>" formaction="<?= CARD_PAGE; ?>" />
		</p>
	<?php endif; ?>
</form>
 
<script>const fromPHPtoJS = <?= json_encode(['eraseConfirm'=>EDIT_GRP_CONFIRM]); ?></script>
<script src='editGroups.js'></script>

et du javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
"use strict";
 
const
	mainForm	= document.querySelector('.editGroups')
	, group		= document.querySelector("[name='id']")
	, erase		= document.querySelector("[name='erase']")
	;
 
function handleSelectOnChange() {
	this.formaction = "parentPage.php?group="+this.value;
	mainForm.submit();
}
 
function handleEraseOnClick(e) {
	if ( confirm(fromPHPtoJS.eraseConfirm) ) {
		mainForm.submit();
	}
	else { e.preventDefault(); }
}
 
console.log(mainForm);
console.log(group);
console.log(erase);
group.onchange	= handleSelectOnChange;
if ( erase ) {
	erase.onclick	= handleEraseOnClick;
}

Mon problème est que je n'arrive pas à gérer le bouton erase puisqu'il n'est pas encore défini (erase = null).

Invité · 23/02/2019, 12h09

Bonjour,

1- ce que tu n'as pas encore compris, c'est que, à part dans le forum PHP, on N'a PAS besoin du script PHP, mais du code HTML généré ("Ctrl"+"U").

2- Explique plus précisément.

Notamment : le code JavaScript est-il AVANT ou APRES le code HTML ?

3- D'autre part, je ne vois pas :

de window.onload ?
Il faut généralement attendre le chargement complet de la page (window.onload) AVANT d'activer les actions/évènements JavaScript.
ni .addEventListener()
qui permet d'"affecter" un évènement à un élément.

**moimp** · 23/02/2019, 13h10

Envoyé par jreaux62

1- ce que tu n'as pas encore compris, c'est que, à part dans le forum PHP, on N'a PAS besoin du script PHP, mais du code HTML généré ("Ctrl"+"U").

Ce n'est sûrement pas la seule mais voici le code simplifié avant sélection d'une option:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
 
	<base href="http://omnes.proginet.local/" />
 
	<link rel="stylesheet" media="all" type="text/css" href="css/structure.css" /> <!-- Dimensions et positions -->
	<link rel="stylesheet" media="screen" type="text/css" href="css/style0.css" /> <!-- Apparence -->
	<link rel="stylesheet" type="text/css" href="css/default_blue.css" /> <!-- Calendrier -->
</head>
 
<body>
 
	<section id="main">
		<div id="left">
			<!-- menu -->
		</div>
		<article id="right">
 
			<h2>Gestion des groupes</h2>
 
			<form method="post" action="" class="L editGroups">
				<label for="id">Groupe à éditer</label><select name="id" id="id"><option value=""></option><option value="">&lt;nouveau&gt;</option><option value="1">Famille</option><option value="2">Amis</option><option value="3">a</option><option value="4">v</option></select>
			</form>
 
			<script>const fromPHPtoJS = {"eraseConfirm":"Attention: En cliquant sur OK vous allez supprimer d\u00e9finitivement ce groupe."}</script>
			<script src='editGroups.js'></script>
 
 
		</article>
	</section>
 
</body>
</html>

Et le formulaire complet après clic sur une option de la liste:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<form method="post" action="" class="L editGroups">
	<label for="id">Groupe à éditer</label><select name="id" id="id"><option value=""></option><option value="">&lt;nouveau&gt;</option><option value="1" selected="selected">Famille</option><option value="2">Amis</option><option value="3">a</option><option value="4">v</option></select>			<input type="hidden" name="id_user" value="1" />
		<p><label for="text">Libellé du groupe</label><input type="text" name="text" id="text" value="Famille" /></p>
		<p>
			<input type="submit" name="save" value="Enregistrer" />
			<input type="submit" name="erase" value ="Supprimer" />
			<input type="submit" value="Retour" formaction="http://omnes.proginet.local/parentPage.php?childPageKey=3" />
		</p>
</form>

2- Explique plus précisément.
Notamment : le code JavaScript est-il AVANT ou APRES le code HTML ?

Voir code ci-dessus

3- D'autre part, je ne vois pas :
[LIST][*]de window.onload ?
Il faut généralement attendre le chargement complet de la page (window.onload) AVANT d'activer les actions/évènements JavaScript.

Je n'en ai pas mis parce que je ne voyais rien à gérer dans cet événement.

3- D'autre part, je ne vois pas :

ni .addEventListener()
qui permet d'"affecter" un événement à un élément.

Parce que j'ai utilisé l'ancienne méthode comme ceci m'a été préconisé dans une autre discussion.

Invité · 23/02/2019, 13h53

Envoyé par moimp

...Et le formulaire complet après clic sur une option de la liste...

Ah ! Mais tu n'avais PAS précisé que ces boutons étaient générés dynamiquement !

Par conséquent, ils N'EXISTENT PAS dans le DOM au chargement de la page.

Dans ce cas, il faut "ruser", et utiliser une astuce : il faut toujours mettre le déclenchement de l'évènement sur un élément DEJA PRESENT dans le DOM.

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"use strict";
 
const mainForm = document.querySelector(".editGroups"); // mainForm EST PRESENT dans le DOM
 
mainForm.addEventListener("click", function(e) {
  let elt = e.target;
  // ---------
  // BTN ERASE
  if (elt.name == "erase") {
    e.preventDefault(); // important (on n'envoie pas le formulaire)
    alert("BTN ERASE");
  }
  // autres boutons
  // ...
});

**moimp** · 23/02/2019, 14h50

Merci pour l'astuce. J'ai modifié mon code en conséquence. Il me reste cependant deux problèmes:
1-Pourquoi dans le code qui suit, le code en commentaire n'est pas équivalent au code qui le suit?
2-Pourquoi, après exécution de la ligne 11, je ne retrouve pas en PHP la variable $_POST['erase'] ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
"use strict";
 
const
	mainForm	= document.querySelector('.editGroups')
	, groupId	= document.querySelector("[name='id']")
	;
 
mainForm.addEventListener('click', function(e) {
	if ( e.target.name == 'erase' ) {
		if ( confirm(fromPHPtoJS.eraseConfirm) ) {
			mainForm.submit();
		}
		else {
			e.preventDefault();
		}
	}
});
/*
groupId.addEventListener('change', function(e) {
	groupId.formaction = "parentPage.php?group="+groupId.value;
	mainForm.submit();
}
*/
function handleGroupIdOnChange() {
	this.formaction = "parentPage.php?group="+this.value;
	mainForm.submit();
}
 
groupId.onchange	= handleGroupIdOnChange;

Invité · 23/02/2019, 15h04

Tu as oublié de fermer addEventListener( :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
groupId.addEventListener('change', function(e) {
	groupId.formaction = "parentPage.php?group="+groupId.value;
	mainForm.submit();
});

Tu devrais regarder plus souvent dans la console (où s'affichent aussi les erreurs).

Et à priori, ce serait plutôt :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
	mainForm.action = "parentPage.php?group="+this.value;
	mainForm.submit();

Gestion d'événements sur bouton

JavaScript

Vue hybride

Discussions similaires

Partager

Partager