Discussion :

[moimp]

Bonjour,

J'ai un formulaire avec deux boutons submit.
Je veux bloquer l'envoi seulement sur l'un des boutons ('destroy')
Voici mon code (extrait):

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
<div class="flex">
	<form method="post" enctype="multipart/form-data" id="form">
		<fieldset><legend><?= UPLOAD_FLD1; ?></legend>
			<input type="hidden" name="max_weight" value="<?= MAX_WEIGHT*1024*1024; ?>" />
			<p><input name="newFile" type="file" /></p>
			<p><input type="submit" name="save" value="<?= UPLOAD_BTN_SAVE; ?>" /></p>
		</fieldset>
		<fieldset><legend><?= UPLOAD_FLD2; ?></legend>
			<p><input type="submit" name="destroy" id="destroy" value="<?= UPLOAD_BTN_DEL; ?>" /></p> <!-- onClick="warning()" -->
		</fieldset>
	</form>
</div>
 
<p class="navH">
	<a href="displPersFeatures.php?id=<?= $id; ?>"><?= UPLOAD_NAV_BACK; ?></a>
</p>
 
<script>
// Solution 1 qui fonctionne mal avec le onclick actuellement en commentaire
        function warning() {
                if (!confirm("Etes-vous sûr de vouloir supprimer la photo ?")) {
                        form.addEventListener('submit', function(e) {
                                e.preventDefault();
                        }, true);
                }
                else window.document.getElementById('form').submit();
        }
        
// Solution 2 qui ne fait pas la distinction entre les deux boutons
document.getElementById('form').addEventListener('submit', function (e) {
  alert(document.getElementById('destroy').blur());
  exit;
  if (!confirm("Etes-vous sûr de vouloir supprimer la photo ?")) {
    // empêcher l'envoi du formulaire suite à l'annulation
    e.preventDefault();
  }
});
</script>

Avec la solution 1, si je clique une fois sur le bouton 'Annuler' de la fenêtre confirm, le bouton 'save' du formulaire devient inopérant.
Je précise que le code de traitement du formulaire est dans le même fichier que le formulaire.

[ABCIWEB]

Utilises l'événement onclick sur chacun des boutons pour avoir des actions différentes ce sera plus simple que d'utiliser l'événement onsubmit du formulaire. Et quand il y a plusieurs boutons c'est aussi souvent plus simple d'utiliser des boutons de type "button".

[moimp]

(ou masque-les si tu as besoin de leurs valeurs côté serveur)

J'en ai effectivement besoin mais qu'entends tu par masquer?
Et pourquoi ton code ne peut pas marcher avec des vrais boutons submit.

[NoSmoking]

Bonjour,
il me semble que l'on peut faire de façon plus basique

Code :

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

1
2
3
4
5
6
7
8
9
function warning(e) {
    if (!confirm("Etes-vous sûr de vouloir supprimer la photo ?")) {
        // évite l'envoi du formulaire
        e.preventDefault();
    }
}
 
var oBtnDestroy = document.querySelector('#destroy');
oBtnDestroy.onclick = warning;

@Watilin : la coloration fonctionne si on utilise <?php en lieu et place de <? déconseillée.

Code html :

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

<p><input type="button" name="destroy" id="destroy" value="<?php= UPLOAD_BTN_DEL; ?>" /></p>

Code html :

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

<p><input type="button" name="destroy" id="destroy" value="<?= UPLOAD_BTN_DEL; ?>" /></p>

[ABCIWEB]

Oui mais déconseillée pour la coloration syntaxique dans ce forum. Autrement je n'ai jamais entendu parler que "<?=" posait problème pour le code lui-même dans un contexte web ? Ou alors j'ai manqué quelque chose mais ça fait des années (php 5.4 si mes souvenirs sont bons) que le l'utilise sans problème.

@smccbbm Quand on soumet un formulaire en écoutant l'événement onsubmit, on sait juste que le formulaire a été soumis mais pas depuis quel bouton. Pour cette raison il vaut mieux écouter l'événement onclick sur les boutons s'il y a plusieurs boutons pour soumettre le même formulaire si on veut pouvoir les différencier.

[moimp]

La solution de NoSmoking fonctionne parfaitement. En plus je ne connaissais pas la fonction querySelector. Par contre, je voudrais savoir à quoi correspond le # devant le nom de la variable.

[Watilin]

Salut !

Pas facile à première vue de différencier deux boutons submit côté client.
Je te suggère cette solution : supprime ces boutons submit (ou masque-les si tu as besoin de leurs valeurs côté serveur), et mets à la place des <input type="button">. Avec un gestionnaire d’évènement click sur chacun de ces boutons, tu pourras alors décider dans quelles conditions soumettre le formulaire en appelant .submit() ou pas.

Code html :

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

1
2
<p><input type="button" name="save"    id="save"    value=" … " /></p>
<p><input type="button" name="destroy" id="destroy" value=" … " /></p>

(Je n’ai pas mis le code PHP car il fait échouer la coloration syntaxique de ce forum.)

Code JS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var $form    = document.getElementById('form');
var $save    = document.getElementById('save');
var $destroy = document.getElementById('destroy');
 
$save.addEventListener('click', function () {
  $form.submit();
});
 
$destroy.addEventListener('click', function () {
  if (confirm('Êtes-vous sûr de vouloir supprimer la photo\xA0?')) {
    $form.submit();
  }
});