diff --git a/client/index.js b/client/index.js index 4709801..8619c9b 100644 --- a/client/index.js +++ b/client/index.js @@ -1,5 +1,4 @@ -function message (level, text) { - const messageContainer = document.getElementById('contact-mailer-message') +function message (messageContainer, level, text) { const messageElement = document.createElement('p') messageContainer.appendChild(messageElement) messageElement.textContent = text @@ -15,11 +14,17 @@ function interceptForm (formId) { * This function intercepts a form submission and send it via XHR. * Param formId is the HTML id of the form */ - const formElem = document.getElementById(formId) + const formElem = document.getElementById(formId) if (!formElem) { console.error('You tried to intercept form id:"' + formId + '" but it was not found.') return } + /* Create the message container */ + const messageBox = document.createElement('div') + messageBox.classList.add('contact-mailer-message-container') + formElem.parentNode.insertBefore(messageBox, formElem) + + /* Intercept the submit event */ formElem.onsubmit = async (e) => { e.preventDefault() fetch(formElem.action, { @@ -28,14 +33,14 @@ function interceptForm (formId) { }) .then(data => { if (!data.ok || data.status == 500) { - message('error', 'Erreur du service d’envoi. Réessayez plus tard ou contactez https://jean-cloud.net') + message(messageBox, 'error', 'Erreur du service d’envoi. Réessayez plus tard ou contactez https://jean-cloud.net') } else if (data.ok || data.status == 200) { - message('success', 'Le message a bien été envoyé !') + message(messageBox, 'success', 'Le message a bien été envoyé !') formElem.reset() } }) .catch((error) => { - message('error', 'Impossible d’envoyer le formulaire. Vérifiez votre connexion internet ou réessayez plus tard.') + message(messageBox, 'error', 'Impossible d’envoyer le formulaire. Vérifiez votre connexion internet ou réessayez plus tard.') }) } }