diff --git a/week-9/working-web-form/index.html b/week-9/working-web-form/index.html index b46857c..cfc6f32 100644 --- a/week-9/working-web-form/index.html +++ b/week-9/working-web-form/index.html @@ -9,29 +9,32 @@ -
-

Web form that works

+ + +

Web form that works!

*Fill in all fields

- +

- - + +

- +

- +

- + +

+
diff --git a/week-9/working-web-form/js/main.js b/week-9/working-web-form/js/main.js index bfa1e75..b184648 100644 --- a/week-9/working-web-form/js/main.js +++ b/week-9/working-web-form/js/main.js @@ -1,4 +1,4 @@ -let form = document.querySelector("form"); +let forms = document.querySelector("form"); let namee = document.getElementById("name"); let mail = document.getElementById("mail"); let subject = document.getElementById("subject"); @@ -13,7 +13,7 @@ let warning = document.querySelector("#warning"); message.value === "" ];*/ -form.addEventListener("submit", function (event) { +forms.addEventListener("submit", function (event) { if ((namee.value === "" || mail.value === "") && (subject.value === "" || message.value === "")){ event.preventDefault(); warning.innerHTML = "You must fill in ALL fields!" ; @@ -46,3 +46,23 @@ else if (namee.value === "") { }); /*Adding FormSpree API*/ +let form = document.getElementById("my-form"); + + async function handleSubmit(event) { + event.preventDefault(); + let status = document.getElementById("my-form-status"); + let data = new FormData(event.target); + fetch(event.target.action, { + method: form.method, + body: data, + headers: { + 'Accept': 'application/json' + } + }).then(response => { + status.innerHTML = "Thanks for your submission!"; + form.reset() + }).catch(error => { + status.innerHTML = "Oops! There was a problem submitting your form" + }); + } + form.addEventListener("submit", handleSubmit)