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)