Answer the question
In order to leave comments, you need to log in
Wrong message when notification about successful submission?
According to the principle of operation, I send data according to the form on the modal window using the fetch method, JSON format, after sending I notify that the message has been sent or something went wrong. There is a db.json file, it accepts data, everything works fine. Launched openserver, json-server no errors, no consoles either. But everyone enters the message something went wrong. What could be the reason?
Here is my js code
const forms = document.querySelectorAll('form');
const message = {
loading:'img/spinner.svg',
success:'Спасибо! Мы с вами свяжемся',
failure:'Что-то пошло не так...'
};
forms.forEach(item => {
bindpostData(item);
});
const postData = async(url,data) => {
const res = await fetch(url, {
method:"POST",
headers:{
'Content-type':'application/json'
},
body: data
});
return await res.json();
};
function bindpostData(form) {
form.addEventListener('submit',(e) => {
e.preventDefault();
const statusMessage = document.createElement('img');
statusMessage.src = message.loading;
statusMessage.style.cssText = `
display:block;
margin:0 auto;
`;
form.append(statusMessage);
const formData = new FormData(form);
const json = JSON.stringify(Object.fromEntries(formData.entries()));
postData('http://localhost:3000/requests',json)
.then(data => data.text())
.then(data => {
console.log(data);
showThanksModal(message.success);
statusMessage.remove();
}).catch(() => {
showThanksModal(message.failure);
}).finally(() => {
form.reset();
});
});
}
function showThanksModal(message) {
const prevModalDialog = document.querySelector('.modal__dialog');
prevModalDialog.classList.add('hide');
openModal();
const thanksModal = document.createElement('div');
thanksModal.classList.add('modal__dialog');
thanksModal.innerHTML = `
<div class = "modal__content">
<button data-close class="modal__close" type="button">
<svg data-close class="modal__close-icon">
<use xlink:href="#close"></use>
</svg>
</button>
<div class="modal__title">${message}</div>
</div
`;
document.querySelector('.modal').append(thanksModal);
setTimeout( () => {
thanksModal.remove();
prevModalDialog.classList.add('show');
prevModalDialog.classList.remove('hide');
closeModal('.modal');
},4000);
<?php
$_POST = json_decode(file_get_contents("php://input"),true);
echo var_dump ($_POST);
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question