Contact basically working.
This commit is contained in:
parent
245a9d86c6
commit
07c73fa562
@ -11,30 +11,30 @@ import com.jessebrault.site.StandardPage
|
|||||||
<div class="control">
|
<div class="control">
|
||||||
<label for="name">Name</label>
|
<label for="name">Name</label>
|
||||||
<input id="name" name="name" type="text" />
|
<input id="name" name="name" type="text" />
|
||||||
<p class="message"> </p>
|
<p id="name-message" class="message"> </p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<label for="institution">Institution</label>
|
<label for="institution">Institution</label>
|
||||||
<input id="institution" name="institution" type="text" />
|
<input id="institution" name="institution" type="text" />
|
||||||
<p class="message"> </p>
|
<p id="institution-message" class="message"> </p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<label for="email">Email</label>
|
<label for="email">Email</label>
|
||||||
<input id="email" name="email" type="email" />
|
<input id="email" name="email" type="email" />
|
||||||
<p class="message"> </p>
|
<p id="email-message" class="message"> </p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<label for="message">Message</label>
|
<label for="message">Message</label>
|
||||||
<textarea id="message" name="message"></textarea>
|
<textarea id="message" name="message"></textarea>
|
||||||
<p class="message"> </p>
|
<p id="message-message" class="message"> </p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<input type="submit" />
|
<input type="submit" />
|
||||||
<p class="message"> </p>
|
<p id="submit-message" class="message"> </p>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</article>
|
</article>
|
||||||
|
@ -3,21 +3,35 @@ window.addEventListener('load', function () {
|
|||||||
contactForm.addEventListener('submit', function (submitEvent) {
|
contactForm.addEventListener('submit', function (submitEvent) {
|
||||||
submitEvent.preventDefault()
|
submitEvent.preventDefault()
|
||||||
const formData = new FormData(contactForm)
|
const formData = new FormData(contactForm)
|
||||||
|
const toSend = {
|
||||||
const message = `
|
name: formData.get('name'),
|
||||||
From: ${formData.get('name')}
|
email: formData.get('email'),
|
||||||
Email: ${formData.get('email')}
|
institution: formData.get('institution'),
|
||||||
Institution: ${formData.get('institution')}
|
message: formData.get('message')
|
||||||
Message:
|
}
|
||||||
${formData.get('message')}
|
fetch('https://api.jessebrault.com/contact/jessebrault', {
|
||||||
`.trim()
|
body: JSON.stringify(toSend),
|
||||||
|
headers: {
|
||||||
const toSend = { message }
|
'Content-type': 'application/json'
|
||||||
console.log(toSend)
|
},
|
||||||
// fetch('https://api.jessebrault.com/contact/jessebrault', {
|
method: 'POST' // TODO: signal
|
||||||
// body: JSON.stringify(toSend),
|
})
|
||||||
// headers: 'Content-Type: Application/JSON',
|
.then(function (response) {
|
||||||
// method: 'POST' // TODO: signal
|
if (response.status === 400) {
|
||||||
// })
|
response.json().then(function (body) {
|
||||||
|
body.errors.forEach(function ({ field, message }) {
|
||||||
|
const element = document.getElementById(`${field}-message`)
|
||||||
|
element.innerText = message
|
||||||
|
})
|
||||||
|
})
|
||||||
|
} else if (response.status === 500) {
|
||||||
|
const submitMessageElement = document.getElementById('submit-message')
|
||||||
|
submitMessageElement.innerText = 'There was internal server error. Please try again later.'
|
||||||
|
} else {
|
||||||
|
const submitMessageElement = document.getElementById('submit-message')
|
||||||
|
submitMessageElement.innerText = 'Your message was successfully sent!'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(function (error) {})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
Loading…
Reference in New Issue
Block a user