Source Code: (back to article)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Form Events Example</title>
</head>
<body>
<div style="display: flex; justify-content: center; align-items: center">
<form
style="display: flex; flex-direction: column; gap: 5px"
name="contactForm"
>
<input type="text" name="fullName" placeholder="Full Name" required />
<textarea name="message" placeholder="Your Message"></textarea>
<input type="submit" value="Send" />
</form>
</div>
<div
style="display: flex; justify-content: center; align-items: center"
id="confirmation"
></div>

<script>
var form = document.forms["contactForm"];

form.onsubmit = function () {
var name = form.elements["fullName"].value;
var message = form.elements["message"].value;
document.getElementById("confirmation").textContent =
"Thank you, " + name + ", we received your message!";
return false; // Prevents form from submitting to a server
};
</script>
</body>
</html>