При отправки на почту ajax/php приходят пустые поля. В чём причина?

Question

[Junior Development]

При отправке на почту оповещение приходит и всё норм, но после подключения ajax приходят пустые поля.
Подскажите пожалуйста в чем причина?

<form action="server.php" class="order-form main-form" id="form" method="post" name="user_form">
			<input type="text" placeholder="Имя и фамилия" name="name" required="required">
			<input type="email" placeholder="E-mail" name="email" required="required">
			<input type="tel" placeholder="Телефон" name="phone" required="required">
			<button class="button btn form-btn" id="submit_btn" type="submit">Оставить заявку!</button>
	</form>

$post_data = $_POST;
$to = '[e-mail]';
$subject = 'Заявка с лендинга';
$message = 'Заявка с лендинга<br />
Имя: ' . $post_data['name'] . '<br />
E-mail: ' . $post_data['email'] . '<br />
Телефон: ' . $post_data['phone'];
$headers = "MIME-Version: 1.0\r\n" . "Content-type: text/html; charset=utf-8\r\n" . "From: <[e-mail]>\r\n";
mail ($to, $subject, $message, iconv ('utf-8', 'windows-1251', $headers));

/* Всплывающее сповещение  */
      const errorMesage = 'Что-то пошло не так...';
      const loadMesage = 'Загрузка...';
      const successMesage = 'Спасибо! Мы скоро с Вами свяжемся!';

     /* Стилизация сообщения*/
     const statusMessage = document.createElement('div');
     statusMessage.style.cssText = `font-size: 2rem; color: #fff`;

      /* Очищаем input при отправке */
      const clearInput = () => {
        const inputs = document.querySelectorAll('input');
        inputs.forEach((item, i, arr) => {
          inputs[i].value = '';
        });
      };


      /* form  --------------------------------------------- */
      const form = document.getElementById('form');

      form.addEventListener('submit', (event) => {
        event.preventDefault();

        /*Показываем сообщение и очищаем поля*/
        form.appendChild(statusMessage);
        statusMessage.textContent = loadMesage;
        clearInput();

        const formData = new FormData(form);
        let body = {};
        formData.forEach((val, key) => {
          body[key] = val;
        });

        postData(body, () => {
          statusMessage.textContent = successMesage;
        }, (error) => {
          statusMessage.textContent = errorMesage;
          console.error(error);
        });

      });

      /* ---------------------------------------------- */

      const postData = (body, outputData, errorData) => {

        const request = new XMLHttpRequest();

        request.addEventListener('readystatechange', () => {

          if (request.readyState !== 4) {
            return;
          }
          if (request.status === 200) {
            outputData();
          }else{
            errorData(request.status);
          }
        });

        request.open('POST', './server.php');
        request.setRequestHeader('Content-Type', 'application/json');
        request.send(JSON.stringify(body));
      };

    };

Comments

[Junior Development]

VicTHOR, прошу прощения, я немного знаю js(с ajax почти не знаком) и совсем не знаю php.
Не могли бы вы немного подробнее указать причину почему поля пустые и на что обратить внимание для устранения проблемы?

Answer 1

[Владимир Романцов]

Видимо форма чистится до того как данные из нее берутся.

Попробуйте так:

postData(body, () => {
        clearInput(); 
        statusMessage.textContent = successMesage;
    }, (error) => {
        statusMessage.textContent = errorMesage;
        console.error(error);
    });

Таким образом вслучае ошибки пользователю не прийдется заново все вводить