K
K
King1234562021-09-12 08:54:55
AJAX
King123456, 2021-09-12 08:54:55

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

1 answer(s)
D
Dimka59, 2021-09-12
@Dimka59

remove the line .then(data => data.text())

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question