Почему приходят пустые данные с формы на почту?

Question

[Hahaz]

<div class="popup hidden" id="popup">
            <div class="popup-content">
                    <div class="popup-container">
                        <span class="close-popup" id="close-popup">×</span>
                        <h2>Запишитесь на бесплатную консультацию!</h2>
                            <form id="contact-form" action="mail.php" method="POST">
                                <div class="form-name">
                                    <input type="text" id="name" name="name" placeholder="Ваше имя" required="">
                                </div>
                                <div class="form-name">
                                    <input type="tel" id="tel2" class="tel-inp_1" name="user_phone"  placeholder="+7(___)___-__-__" style="color: black;">
                                </div>
                                <button type="submit" class="but-popup">Записаться</button>
                                <p class="button-text"><span class="gray-text">Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c</span> <span class="red-text">политикой конфиденциальности.</span></p>
                            </form>
                    </div>
                </div>
            </div>

let inputPhone = document.getElementById("tel2");
let inputPhone2 = document.getElementById("tel");
inputPhone.addEventListener('input', () => phoneMask(inputPhone));
inputPhone2.addEventListener('input', () => phoneMask(inputPhone2));

function phoneMask(inputEl) {
    let patStringArr = "+7(___)___-__-__".split('');
    let arrPush = [3, 4, 5, 7, 8, 9, 11, 12, 14, 15];
    let val = inputEl.value;
    let arr = val.replace(/\D+/g, "").slice(1).split('');
    let n;
    let ni;
    arr.forEach((s, i) => {
        n = arrPush[i];
        patStringArr[n] = s;
        ni = i;
    });
    arr.length < 10 ? inputEl.style.color = 'black' : inputEl.style.color = 'black';
    inputEl.value = patStringArr.join('');
    n ? inputEl.setSelectionRange(n + 1, n + 1) : inputEl.setSelectionRange(17, 17);
}

window.onload = function() {
    phoneMask(document.getElementById("tel2"));
};


// Функция для отправки формы с именем
async function sendForm(data) {
    const res = await fetch('./mail.php', {
        method: 'POST',
        body: data,
        
    });

    if (res.ok) {
        showAlert('Спасибо! Ваш запрос успешно отправлен.');
        clearForm();
        phoneMask(document.getElementById("tel2"));
    } else {
        showAlert('Упс! Что-то пошло не так.');
    }
}

// Функция для отправки формы без имени
async function sendFormWithoutName(data) {
    const res = await fetch('./mail.php', {
        method: 'POST',
        body: data
    });

    if (res.ok) {
        showAlert('Спасибо! Ваш запрос успешно отправлен.');
        clearForm();
        phoneMask(document.getElementById("tel2"));
    } else {
        showAlert('Упс! Что-то пошло не так.');
    }
}


document.getElementById('contact-form').addEventListener('submit', e => {
    e.preventDefault();

    const phoneNumber = document.getElementById("tel2").value;

    console.log("Отладка: Телефонный номер:", phoneNumber); 

    if (phoneNumber.trim() !== "" && phoneNumber.replace(/\D/g, "").length >= 11){
        const data = {
            phone: document.getElementById('tel2').value,
            name: document.getElementById('name').value
        }

        console.log("Отладка: Данные для отправки:", data); 

        sendForm(data);
    } else {
        showAlert("Пожалуйста, введите корректный номер телефона.");
    }
});

// Обработчик отправки формы без имени
document.getElementById('form1').addEventListener('submit', e => {
    e.preventDefault();

    const phoneNumber = document.getElementById("tel").value;

    if (phoneNumber.trim() !== "" && phoneNumber.replace(/\D/g, "").length >= 11){
        const data = {
            phone: document.getElementById('tel').value
        }

        sendFormWithoutName(data);
    } else {
        showAlert("Пожалуйста, введите корректный номер телефона.");
    }
});
    
    function clearForm() {
        document.getElementById('tel').value = ''; 
        document.getElementById('tel2').value = ''; 
    document.getElementById('name').value = ''; 
    }

<?php
require_once('phpmailer/PHPMailerAutoload.php');

$mail = new PHPMailer;
$mail->CharSet = 'utf-8';

$name = $_POST['name'];
$phone = $_POST['user_phone'];

$mail->isSMTP();                                  
$mail->Host = '...';  
$mail->SMTPAuth = true;                           
$mail->Username = '...'; 
$mail->Password = '...';
$mail->SMTPSecure = 'tls';                           
$mail->Port = 587;

$mail->setFrom('...', '...'); 
$mail->addAddress('...');    

$mail->isHTML(true);                                  
$mail->Subject = 'Заявка с сайта';
$mail->Body    = '' .$name . ' оставил заявку, его телефон ' .$phone;
$mail->AltBody = '';

if(!$mail->send()) {
    echo 'Ошибка при отправке сообщения: ';
} else {
    echo 'Сообщение успешно отправлено';
}
?>

Данные из формы успешно передаютсяна клиентской стороне JS.

Answer 1

[AUser0]

Так проверьте, какие данные приходят в PHP!
Например прямо сейчас видно, что JS делает POST-запрос с phone, а PHP работает уже с $_POST['user_phone'].
Форма без имени так вообще не показана, но работает с элементом id=tel.