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
HTML,
Webseite,
Programmiersprache,
Webdesign,
Webentwicklung
