Formulaire avec 2 boutons submit
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:
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.
