Bouton disparaîssant du tableau post

**moimp** · 21/11/2020, 11h53

Bonjour,

J'ai une page avec deux formulaires dont je joins le rendu. Cette page contient deux fichiers JS soit un par formulaire. Je ne comprends pas pourquoi lorsque je clique sur le bouton 'del' du formulaire footForm, le traitement JS est appelé mais la variable 'del' n'est pas transmise au fichier PHP de traitement alors que les autres champs sont bien transmis.
Dans le fichier de traitement PHP, j'obtiens:
$_POST['favourites'] = '';
$_POST['latest'] = '';
et c'est tout.

Code partiel du fichier footForm.js incriminé:

Code JS :

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
"use strict";
 
const
	footForm	= document.querySelector('.footForm')
	,delBtn		= document.querySelector("[name='del']")
	;
 
console.log(delBtn.value); // retourne 'supprimer'
 
delBtn.addEventListener('focus', function(e) {
	let result = confirm(messagesJS);
	if (!result)
		e.preventDefault();
	else {
		footForm.submit();
	}
}, false );

Rendu:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Titre</title>
 
		<meta http-equiv="Expires" content="-1" />
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
 
		<link rel="stylesheet" media="all" type="text/css" href="../css/structure.css" />
		<link rel="stylesheet" media="all" type="text/css" href="../css/screen.css" />
		<link rel="stylesheet" media="print" type="text/css" href="../css/print.css" />
			</head>
 
	<body>
 
<header>
	<div class="displTimer">
		<span id="timer"></span>
	</div>
	<div>
		<img src="http://sirep.proginet.local/images/logo_sirep.png" alt="logo">
		<h1>h1</h1>
	</div>
</header>
 
		<section>
 
			<div id="left">
 
<nav class="mainNav">
	<!-- Menu vertical -->
</nav>
 
			</div>
			<article id="right">
 
<h2>Fichier clients</h2>
 
 
<h3>h3</h3>
 
<div class="menuH">
	<!-- Menu horizontal -->
</div>
 
<form method="post" name="mainForm" action="http://sirep.proginet.local/frontend/mainFormHandler.php">
	<input type="hidden" name="id_subscriber" value="1">
	<div class="formFlex">
		<div>
			<!-- Champs de saisie -->
		</div>
		<div>
			<!-- Champs de saisie -->
		</div>
	</div>
	<div class="bottom">
		<label for="notice">Note</label>
			<!-- Champ de saisie -->
		<p class="bottomButton"></p>
	</div>
</form>
 
<form method="post" action="../frontend/footFormHandler.php" class="footForm">
	<div>
		<label for="isFavourit">Ajouter aux favoris</label><input type="checkbox" id="isFavourit" name="isFavourit" value="1">
		<label for="favourites">Favoris</label><select name='favourites' id='favourites'><option value='' label='&lt; Sélectionner &gt;'></option><option value='2951'>Weber GmbH</option></select>		<label for="latest">Récents</label><select name='latest' id='latest'><option value='' label='&lt; Sélectionner &gt;'></option><option value='3008'>Ecole Maternelle de la Bruche</option><option value='2950'>Société Française de Construction</option><option value='3010'>Millipore</option><option value='2951'>Weber GmbH</option><option value='2953'>SOMAB</option></select>	</div>
	<div>
		<input type='submit' name='new' value='Nouveau'>		
		<input type="submit" name="del" value="Supprimer" title="Attention, cette action supprimera complètement le client.">
		<input type="submit" name="print" value="Imprimer" title="Impression de la fiche client">
		<input type="submit" name="VCF" value="Carte de visite" title="Enregistre les données au format carte de visite VCF.">
	</div>
</form>
 
<script>const messagesJS = "Attention, vous \u00eates sur le point de supprimer compl\u00e8tement ce client. Cette op\u00e9ration est d\u00e9finitive. Confirmez-vous votre choix\\u+A0?";</script>
<script src="../js/footForm.js"></script>
<script src="../js/mainForm.js"></script>
 
			</article>
 
		</section>
 
	</body>
</html>

**javatwister** · 21/11/2020, 12h07

Le choix de l'événement "focus" est singulier; le plus logique aurait été:

Code javascript :

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

footForm.addEventListener("submit", function(e){...})

Mais il y a peut-être d'autres soucis que je n'ai pas vus;

**javatwister** · 21/11/2020, 12h30

Autre idée: si tes 2 formulaires ont la même classe (ce qui paraît logique), document.querySelector('.footForm') va retourner le premier... Et les valeurs du 2e seront inconnues, côté serveur.

**moimp** · 21/11/2020, 19h02

#2
Comme j'ai plusieurs boutons submit, je ne sais pas comment distinguer celui qui a été actionné. C'est pour cette raison que j'avais appliqué l'écouteur sur le bouton qui m'intéresse 'del'.

#3
Les deux formulaires n'ont pas la même classe. Celles-ci servent essentiellement à la disposition 'flex' des éléments qui n'est pas la même sur les deux formulaires.

**javatwister** · 21/11/2020, 19h14

Envoyé par moimp

Comme j'ai plusieurs boutons submit, je ne sais pas comment distinguer celui qui a été actionné. C'est pour cette raison que j'avais appliqué l'écouteur sur le bouton qui m'intéresse 'del'.

Quand tu soumets un formulaire, seul le "bouton submit" activé est récupéré comme variable;

**moimp** · 21/11/2020, 19h43

Côté serveur oui, mais comment le savoir côté client en vue d'exécuter un code différent du côté client, vu que les lignes 6 et 7 affiche une chaîne vide.
Voici le bout de code que j'ai écrit:

Code :

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

1
2
3
4
5
6
7
8
9
10
footForm.addEventListener('submit', function(e) {
	console.log(footForm.new.value);
	console.log(footForm.del.value);
	console.log(footForm.print.value);
	console.log(footForm.VCF.value);
	console.log(e.target);
	console.log(this);
	let result = confirm(messagesJS);
	e.preventDefault();
}, false );

**javatwister** · 21/11/2020, 19h53

pas du tout, les lignes 6 et 7 renvoient le formulaire lui-même (c'est ce que tu demandes...);

**moimp** · 21/11/2020, 20h43

J'ai du faire une confusion parce qu'un moment j'ai eu des lignes vides et je n'ai pas vu pourquoi. Ce que je veux c'est savoir quel bouton submit a été sélectionné pour pouvoir afficher un confirm() en fonction du bouton qui a déclenché la soumission du formulaire et stopper (preventDefault) ou valider l'envoi du formulaire en fonction de la réponse de l'utilisateur.

**javatwister** · 21/11/2020, 21h44

Alors voilà une idée:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<form method="post" action="" class="footForm">
	<div>
		<label for="isFavourit">Ajouter aux favoris</label><input type="checkbox" id="isFavourit" name="isFavourit" value="1">
		<label for="favourites">Favoris</label><select name='favourites' id='favourites'><option value='' label='&lt; Sélectionner &gt;'></option><option value='2951'>Weber GmbH</option></select>		<label for="latest">Récents</label><select name='latest' id='latest'><option value='' label='&lt; Sélectionner &gt;'></option><option value='3008'>Ecole Maternelle de la Bruche</option><option value='2950'>Société Française de Construction</option><option value='3010'>Millipore</option><option value='2951'>Weber GmbH</option><option value='2953'>SOMAB</option></select>	</div>
	<div>
		<input type='submit' name='new' value='Nouveau' data-mess="Voulez-vous créer un truc?">		
		<input type="submit" name="del" value="Supprimer" data-mess="Voulez-vous supprimer un truc?">
		<input type="submit" name="print" value="Imprimer" data-mess="Voulez-vous imprimer un truc?">
		<input type="submit" name="VCF" value="Carte de visite" data-mess="Voulez-vous une carte de visite de truc?">
	</div>
</form>

(J'ai remplacé les "title" par des "data-", juste pour l'exemple)

Code javascript :

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

1
2
3
4
const footForm= document.querySelector('.footForm');
footForm.addEventListener('submit', (e) => {
	if(!confirm(e.submitter.dataset.mess)) e.preventDefault() ;
}, false );

**moimp** · 22/11/2020, 17h14

Ah, c'est super! Merci. C'est exactement ce que je voulais!

Bouton disparaîssant du tableau post

JavaScript

Discussions similaires

Partager

Partager