From 9fa480f6ed17957d4d2e3dd3c426f04203da0e3c Mon Sep 17 00:00:00 2001 From: Alex Mueller Date: Sun, 29 Mar 2020 22:18:05 -0400 Subject: [PATCH] form --- week-9/form.html | 33 ++++++++++++++++++++++++++++ week-9/js/form.js | 55 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 88 insertions(+) create mode 100644 week-9/form.html create mode 100644 week-9/js/form.js diff --git a/week-9/form.html b/week-9/form.html new file mode 100644 index 0000000..4acc709 --- /dev/null +++ b/week-9/form.html @@ -0,0 +1,33 @@ + + + + + + Web Form + + +

Contact Me!

+
+ + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/week-9/js/form.js b/week-9/js/form.js new file mode 100644 index 0000000..65f9aea --- /dev/null +++ b/week-9/js/form.js @@ -0,0 +1,55 @@ +let form = document.querySelector('#myform'); +form.addEventListener('submit', submit); + +let name = document.querySelector('#name'); +let email = document.querySelector('#email'); +let subject = document.querySelector('#subject'); +let message = document.querySelector('#message'); +let inputList = [name, email, subject, message]; + + + +inputList.forEach(input => { + input.addEventListener('blur', findInputError) +}); + +function findInputError(e) { + let input = e.currentTarget.id + let errorMessage = document.querySelector(`#${input}-error`) + console.log(input) + if (e.currentTarget.value) { + errorMessage.innerHTML = '' + } else { + errorMessage.innerHTML = `${input} must be filled out.` + } +} + +function validate(e) { + if (name.value && email.value && subject.value && message.value) { + console.log("hooray"); + } else { + inputList.forEach(input => { + let inputName = input.id; + let errorMessage = document.querySelector(`#${inputName}-error`); + if (input.value) { + errorMessage.innerHTML = ''; + } else { + errorMessage.innerHTML = `${inputName} must be filled out.`; + } + }); + e.preventDefault(); + } +} + +function submit(e) { + const formData = new FormData(this); + validate(e); + fetch('https://formspree.io/moqlodoz', { + method: 'post', + body: formData + }).then((response) => { + return response; + }).then((data) => { + console.log(data); + }); +} \ No newline at end of file