HTML Website - Kontaktformular zurücksetzen nach Abschicken?
Hallo zusammen,
ich will, dass mein Kontaktformular nach dem Abschicken wieder zurückgesetzt wird mithilfe von Javascript. Leider kenne ich mich mit Javascript null aus und ChatGPT findet hierfür auch kein Skript, dass bei mir funktioniert (oder ich bin einfach zu dumm das korrekt im html Code einzufügen )
Folgend die HTML-Seite dazu. (Head hab ich weggelassen, da sonst zu viele Zeichen)
<body>
<header>
<h1>
<div class="logo">
<a href="index.html"><img src="bilder/Logo_Tierhilfe.png"></a>
</div>
Tierhilfe Europa e.V. - Mitglied werden
</h1>
<nav>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="ueber-uns.html">Über uns</a></li>
<li class="dropdown">
<a href="unterstuetzung.html">Unterstütze uns</a>
<ul class="dropdown-content">
<li><a href="mitglied_werden.html">Mitglied werden</a></li>
<li><a href="spenden.html">Spenden</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<main class="background">
<div class="container">
<h3>Mitglied werden - jetzt registrieren</h3>
<h6>*Pflichtfelder</h6>
<br>
<div class="aufzaehlung">
<form>
<label for="mail">*E-Mail:</label>
<input type="email"name="input_mail_field"id="mail" required>
<br>
<label for="username">*Benutzername:</label>
<input type="text"name="input_username_field"id="username" required>
<br>
<label for="birthday">Geburtsdatum:</label>
<input type="date"name="input_birthday_field"id="birthday">
<br>
<label for="password">*Passwort:</label>
<input type="password"name="input_password_field"id="password" required>
<br>
<label for="confirmpassword">*Passwort bestätigen:</label>
<input type="password"name="input_confirm_password_field"id="confirmpassword" required>
<br>
<label for="sex">Geschlecht: </label>
<select type="select" name="input_sex_field" id="sex">
<option>keine Angabe</option>
<option>Männlich</option>
<option>Weiblich</option>
</select>
<br>
<label for="checkdataprotection">*Ich akzeptiere die <a href="datenschutz.html">Datenschutzbestimmungen von Tierhilfe Europa e.V.: </a></label>
<input type="checkbox" name="check_data_protection" id="checkdataprotection" required>
<br>
<br>
<br>
<input type="reset" name="reset_field" id="reset" value="Zurücksetzen">
<input type="submit" name="submit_field" id="submit" value="Absenden">
<br>
</form>
</div>
</div>
</main>
<script>
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault(); // verhindert echtes Absenden
alert("Vielen Dank! Dein Formular wurde erfolgreich abgeschickt. Du erhältst in Kürze eine Bestätigung per E-Mail von uns.");
// Wichtiger Trick, damit das Reset nach dem Alert wirklich ausgeführt wird
setTimeout(() => {
form.reset();
}, 0);
});
</script>
<a title="Zurück nach oben" class="back-to-top" href="#top">↑</a>
<footer>
<p>© 2025 Tierhilfe Europa e.V. </p>
<a href="datenschutz.html">Datenschutz</a>
<a href="impressum.html">Impressum</a>
</footer>
</body>
</html>
Hat jemand von euch einen Tipp, wie ich das mit Javascript machen muss, damit das Formular nach dem Absenden automatisch zurückgesetzt wird?
Sonstige Tipps zu meinem HTML nehme ich auch dankend an. :-)
Liebe Grüße
2 Antworten
Hi Didi43150,
es ist nicht schlimm wenn jemand nicht JavaScript kann. Es wäre vielleicht ein guter Anstoß es zu lernen, weil man damit viel machen kann. Das Problem in deinem oberen Code birgt darin das der EventListener der auf submit-Events reagiert, vor dem Absenden der Daten. Das bedeutet das die Daten bevor sie gesendet werden können, gelöscht werden. Daher solltest du das ganze mit diesem Code umgehen:
const form = document.querySelector("form");
form.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(form);
try {
const response = await fetch("ziel.php", {
method: "POST",
body: formData
});
if (response.ok) {
alert("Daten erfolgreich gesendet!");
form.reset(); // Jetzt ist es sicher
} else {
alert("Fehler beim Absenden.");
}
} catch (error) {
alert("Verbindungsfehler: " + error.message);
}
});
Indem oben geschriebenen Beispiel, wird das Senden über die native Methode von HTML unterdrückt und dann selbst die Daten via fetch-Methode gesendet. Wenn das Formular dann erfolgreich gesendet wurde, werden die Felder zurück gesetzt und ein alert ausgegeben.
Viel Erfolg
So macht das Problem Sinn. Dachte er würde sich darpber beschweren, dass das Zurücksetzen nicht klappt ;-)
Es gibt eine Reset-Methode für Form-Elemente:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
Die sollte so eigentlich auch ausgeführt werden, wenn nicht müsstest du weiter debuggen um herauszufinden, warum nicht.