Bestätigungsmeldung für Formular

T1w2i3s4t5e6r

Grünschnabel
Hallo Zusammen,

Ich habe ein Formular mit Speichern und Löschen Button. Welcher Button gedrückt wurde, werte ich über die $_POST-Variable in PHP aus, was wunderbar funktioniert.

Jetzt würde ich gern, wenn der Löschen-Button gedrückt wird, dass noch eine zusätzliche Nachfrage kommt, ob wirklich gelöscht werden soll. Folgender Code bisher:

HTML:
<form name='form' action='index.php?id=4' method='post'>
    <input type='submit' name='Speichern' value='Speichern'>
    <input type='submit' name='Loeschen' Value='Löschen'>
</form>

Javascript:
window.addEventListener('submit', function (e) {
        
            if (confirm('Wirklich löschen?')) {
                return true;
            } else {
                return false;
            }
        
    })

1. Problem: Der Code wird natürlich beim betätigen von beiden Button ausgeführt. Ich habe keine Idee, wie ich an dieser Stelle rausfinde, welcher der beiden Button betätigt wurde.
2. Problem: Egal was ich bei der Meldung anklicke, ob Abbrechen oder Okay. Beide Male wird das Formular abgeschickt.

Vielleicht bin ich auch völlig auf dem Holzweg und ich sollte das Thema ganz anders angehen, ich weiß es nicht. Ich möchte lediglich eine zweite Bestätigung beim Löschen.

Vielleicht kann mir jemand einen Stups in die richtige Richtung geben.


Vielen Dank schon mal für eure Antworten


Denis
 
Zum 1. Problem: Dazu musst Du wissen, welcher Submitbutton gedrückt wurde. Unter event.target findest Du das Element, das das Event ausgelöst hat. Beim Submitevent ist dies jedoch das Formular, hilft also nicht. Lauschst Du dagegen auf das click-Event, findest Du unter event.target den Button, der gedrückt wurde und kannst an Hand des name-Attributes verzweigen.
Zum 2. Problem: Das ist auch meine Erfahrung: Die Steuerung über den Rückgabewert true oder false funktioniert nicht zuverlässig. Besser das Default-Verhalten, also Abschicken des Formulars, mit event.preventDefault() unterdrücken.
Dies Javascript sollte dann funktionieren:
Code:
        window.addEventListener('click', function (event) {
            if (event.target.name == 'Loeschen') {
                if (!confirm('Wirklich löschen?')) {
                    event.preventDefault();
                }
            }
        });
 
Zurück