Source Code:
(back to article)
Submit
Result:
Report an issue
<!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>