Skip to content
Permalink
57c2045312
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

dmd3475-spring-2022/week-9/web form 2.0/emailForm.html

Go to file
 
 
Cannot retrieve contributors at this time
57 lines (50 sloc) 1.83 KB
Raw Blame
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Week 8 Part 2</title>
</head>
<body>
<form id="emailForm" action="https://formspree.io/f/xyyodebw" method="POST">
<input type="text" name="name" placeholder="Name"><br>
<input type="text" name="email" placeholder="Email"><br>
<input type="text" name="subject" placeholder="Subject"><br>
<input type="text" name="message" placeholder="Message"><br>
<input type="submit" value="Send Message">
<p id="my-form-status"></p>
</form>
<script src="emailForm.js"></script>
<script>
var form = document.getElementById("emailForm");
async function handleSubmit(event) {
event.preventDefault();
var status = document.getElementById("my-form-status");
var data = new FormData(event.target);
fetch(event.target.action, {
method: form.method,
body: data,
headers: {
'Accept': 'application/json'
}
}).then(response => {
if (response.ok) {
status.innerHTML = "Thanks for your submission!";
form.reset()
} else {
response.json().then(data => {
if (Object.hasOwn(data, 'errors')) {
status.innerHTML = data["errors"].map(error => error["message"]).join(", ")
} else {
status.innerHTML = "Oops! There was a problem submitting your form"
}
})
}
}).catch(error => {
status.innerHTML = "Oops! There was a problem submitting your form"
});
}
form.addEventListener("submit", handleSubmit)
</script>
</body>
</html>