Почему $_POST пустой?

Question

[Valsin]

Здравствуйте! Почему $_POST приходит пустой? (Если изменить type кнопки на submit, то все приходит, но тогда открывается отдельная страница, а это не ок)

<form action="mail.php" method="post">
	<div class="popup-form__wrap">
		<label class="animated" id="labelPhone" for="#modal-phone">Введите номер телефона</label>
		<input name="modalphone" id="modal-phone" placeholder="Ваш номер телефона" type="text">
	</div>
	<div class="popup-form__wrap">
		<label class="animated" id="labelName" for="#modal-name">Введите Ваше имя</label>
		<input id="modal-name" placeholder="Ваше имя" type="text">
	</div>
	<button class="button" type="button" id="send"><span>Оставить заявку</span></button>
</form>

let send = document.querySelector('#send');
send.onclick = sendEmail;
function sendEmail(e) {
	let userName = document.querySelector('#modal-name').value;
	let userPhone = document.querySelector('#modal-phone').value;
	if (userName.trim() != '' && userPhone != '') {
		fetch('mail.php', { // url, на который посылается запрос
		    method: 'POST', // Метод
		    headers: {
		        'Content-Type': 'application/x-www-form-urlencoded',
		    },
		    data: {
		    	'userPhone' : 1,
		    	'userName' : userName
		    }
		})
		/*.then(response => response.text())
		.then(response => {
			console.log(response);
		});*/
	}
}

<?php 
$phone = $_POST['userPhone'];
$message = '';
$message .= '<h1>Заказ</h1>';
$message .= '<p>Телефон: '. $phone .'</p>';
//$message .= '<p>Клиент: '.$_POST['ename'].'</p>';
print_r($message);
?>

Comments

[Valsin]

edward_freedom, помогло, спасибо) А почему не в ответ?

[edward_freedom]

Valsin, изменил под ответ. На официальном сайте есть вариант удобнее. Напишу его в ответе

Answer 1

[edward_freedom]

у тебя указано

'Content-Type': 'application/x-www-form-urlencoded',

так и передавай как указал

body: 'userPhone=1&userName=' + userName

Вот вариант удобнее, с офф сайта

let user = {
  name: 'John',
  surname: 'Smith'
};

let response = await fetch('/article/fetch/post/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(user)
});

let result = await response.json();
alert(result.message);