Hallo liebe Experten,
ich habe ein kleines Problem, dass ich durch Googeln nicht lösen konnte.
Ich habe auf meiner Website ein Kontaktformular eingebaut. Die Funktionalität über PHP mit der mail()-Funktion klappt reibungslos. Das habe ich bereits getestet.
Als kleines besonderes Etwas (bin gerade erst dabei Javascript zu lernen, ich habe nach HTML und CSS erst PHP gemacht), hatte ich vor, ein window.alert auszugeben, wenn das Formular erfolgreich versendet wurde.
Leider funktioniert das in der Praxis nicht so ie gewollt. Ich habe einige Formularfelder, die ich in HTML mit required gekennzeichnet habe.
Kurz um, wenn ich nicht alle Pflichtfelder ausfülle, oder sogar ein leeres Formular absende, erscheint das window.alert, aber erst danach kommt die Prüfung, ob Pflichtfelder ausgefüllt wurden.
Das ist natürlich ungünstig. Das bedeutet, mein Anliegen ist, das so zu timen, dass die Prüfung, ob alle Pflichtfelder ausgefüllt sind, vor dem window.alert kommen.
Wie kann ich das umsetzen?
Vielen Dank vorab.
Anbei mein Quellcode:
<!DOCTYPE html>
<html>
<head>
<title>Moselbank AG - Kontakt</title>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<meta name="publisher" content="Marcel Laux">
<meta name="copyright" content="Marcel Laux">
<link href="design.css" rel="stylesheet">
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="443030eb-0120-420e-aea1-6134b79dcfeb" data-blockingmode="auto" type="text/javascript"></script>
</head>
<body>
<div id="seite">
<header><img src="mosel-818603_1920.jpg" title="Titelbild" alt="Titelbild - Mann mit einem Tablet auf blauem Hintergrund" id="logo"></header><nav>
<ul>
<li><a href="index.php">Willkommen</a></li>
<li><a href="unternehmen.php">Unternehmen</a></li>
<li><a href="chart.php">Charts</a></li>
<li><a href="depotstruktur.php">Depotstruktur</a></li>
<li><a href="wirtschaftsdaten.php">Wirtschaftsbericht</a></li>
<li><a href="bilanz.php">Bilanz</a></li>
<li><a href="chronik.php">Chronik</a></li>
<li><a href="presse.php">Presse</a></li>
<li><a href="dokument.php">Dokumente</a></li>
</ul>
</nav><section>
<h1>Kontakt</h1>
<p>Nutzen Sie einfach und unkompliziert unser Kontaktformular. Wir werden Ihr Anliegen schnellstmöglich bearbeiten.</p>
<form action="/kontakt.php" method="post">
<span id="red">* Pflichtfeld</span><br>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" placeholder="Michael Mustermann"><br><br>
<label for="email">E-Mail:</label><br>
<input type="email" id="email" name="email" required placeholder="mustermann@example.de"><span id="red">*</span><br><br>
<fieldset>
<input type="radio" id="aktionaer" name="datenerhebung" value="Aktionaer mit Frage">
<label for="aktionaer">Ich bin Aktionär und habe eine Frage</label><br>
<input type="radio" id="interessent" name="datenerhebung" value="Interessent mit Frage">
<label for="interessent">Ich bin Interessent und habe eine Frage</label><br>
<input type="radio" id="beschwerde" name="datenerhebung" value="Beschwerde">
<label for="beschwerde">Ich möchte mich beschweren</label><br>
<input type="radio" id="anregung" name="datenerhebung" value="Anregung">
<label for="anregung">Ich habe eine Anregung</label><br>
</fieldset>
<span id="kontakt">Wozu erheben wir diese Daten?</span><br>
<div id="hidden">
<label>Vielen Dank für Ihr Interesse. Damit wir Ihre Anfrage in die richtige Abteilung weiterleiten können, würden wir uns freuen, wenn Sie uns bereits vorab die Information über die Art Ihrer Anfrage mitteilen.</label>
<label>Worin liegt Ihr Vorteil?<br>
Sie erhalten Ihre Antwort deutlich schneller, da direkt der zuständige Mitarbeiter Ihre Anfrage bearbeiten kann.
</label><br>
</div>
<br>
<label for="message">Ihre Nachricht:</label><br>
<textarea id="message" name="message" rows="9" cols="50" required></textarea><span id="red">*</span><br>
<label for="check">Ich akzeptiere die <a href="datenschutz.php#sprungmarke">Datenschutzbestimmungen</a>:</label>
<input type="checkbox" id="check" name="check" required><span id="red">*</span><br><br>
<input type="submit" id="submit" name="submit" value="Absenden"><br>
</form>
</section>
<footer>
<p id="hinweis"><span id="red">*</span>Mit dem Klick auf einen Link oder eine Grafik mit vorstehender Kennzeichnung lösen Sie für mein Spielprofil einen virtuellen Bonus in Form von Spielgeld aus. Es findet keine tatsächliche Bezahlung statt.</p>
<ul>
<li>© 2021 - fiktive Unternehmensseite</li>
<li><a href="kontakt.php">Kontakt</a></li>
<li><a href="impressum.php">Impressum</a></li>
<li><a href="datenschutz.php">Datenschutz</a></li>
</ul>
</footer></div>
<script>
function datenerhebung () {
var hidden = document.getElementById("hidden");
if (hidden.style.display === "none") {
hidden.style.display = "block";
}
else {
hidden.style.display = "none";
}
}
function meldung () {
window.alert("Vielen Dank. Ihre Kontaktanfrage wurde erfolgreich versandt.");
}
document.getElementById("kontakt").addEventListener("click", datenerhebung, false);
document.getElementById("submit").addEventListener("click", meldung, false);
</script>
</body>
</html>Wer es selbst testen möchte: