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".

[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();
  }
});

[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.

[ABCIWEB]

C'est pas une variable c'est le nom de ton sélecteur et le # est pour indiquer que c'est un id (même notation que pour les css). Remarques que c'est dans la continuité de ce qu'on a dit plus haut, à savoir qu'on se sert de l'événement onclick sur le bouton et non pas de l'événement onsubmit du formulaire pour pouvoir gérer l'origine du bouton.

[moimp]

Merci à vous trois, non seulement vous m'avez bien aidé mais j'ai aussi appris bien des choses. Je marque le sujet comme résolu.

[NoSmoking]

Oui mais déconseillée pour la coloration syntaxique dans ce forum.

effectivement, toutes mes confuses, , j'ai focalisé sur <? et non la forme raccourci <?=, il semblerait donc bien que la coloration syntaxique ne prenne pas celle ci en compte.

D'une manière générale

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.

en attendant que tous les navigateurs reconnaissent explicitOriginalTarget, exclusif FF, on peut récupérer l'élément actif

Code :

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

1
2
3
4
5
6
7
8
9
var oForm = document.querySelector('form');
oForm.onsubmit = function (e) {
    var oBtn = document.activeElement;
    if ('destroy' === oBtn.name) {
        if (!confirm('Etes-vous sûr de vouloir supprimer la photo ?')) {
            e.preventDefault();
        }
    }
};

mais cela ne me semble pas bien judicieux dans ton cas, cibler un bouton particulier me semble un meilleur choix.

[ABCIWEB]

Je voulais dire que cette information n'était pas disponible dans le "event" du submit. Merci pour cette autre solution à laquelle je n'avais pas pensé

[moimp]

@noSmoking: Ta dernière solution est celle que j'avais imaginée au départ mais mes connaissance JS sont encore bien trop faibles pour me permettre d'y parvenir.
Encore merci à vous tous!

[ABCIWEB]

Néanmoins ce n'est pas la solution la plus générique (comme il l'a dit lui-même), car la propriété .activeElement fait référence à l'élément qui a le focus ce qui est potentiellement beaucoup plus problématique que de gérer l'événement onclick.

Par exemple sur une note w3school à propos de "activeElement" :

Note: For iOS, elements that are not text input elements will not get focus assigned to them. The property will then be body or null.

Je sais pas te dire si cette info est encore d'actualité, mais pour éviter de chercher et sachant que l'événement onclick est beaucoup plus robuste en termes de compatibilité avec les différents navigateurs on privilégie son utilisation quand c'est possible (surtout quand c'est en même temps plus simple)