Contact basically working.

This commit is contained in:
JesseBrault0709 2024-06-07 10:10:11 +02:00
parent 245a9d86c6
commit 07c73fa562
2 changed files with 35 additions and 21 deletions

View File

@ -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">&nbsp;</p> <p id="name-message" class="message">&nbsp;</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">&nbsp;</p> <p id="institution-message" class="message">&nbsp;</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">&nbsp;</p> <p id="email-message" class="message">&nbsp;</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">&nbsp;</p> <p id="message-message" class="message">&nbsp;</p>
</div> </div>
<div class="control"> <div class="control">
<input type="submit" /> <input type="submit" />
<p class="message">&nbsp;</p> <p id="submit-message" class="message">&nbsp;</p>
</div> </div>
</form> </form>
</article> </article>

View File

@ -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) {})
}) })
}) })