Всем здравствуйте! Имею следующие данные. Если указываю у формы action на файл send.php, то форма приходит, но пустая. Сейчас не приходит не чего так как я убрал ссылку на файл и указал его в js. Файл php лежит в корне. Подскажите что я делаю не так и где моя ошибка?
https://rig-line.ru/
<form action="#" class="form" method="post" id="form">
<h3 class="form__title title">Есть вопросы? Задавайте!</h3>
<div class="form__block">
<div class="input__block">
<input type="text" name="name" id="name" class="form__input input" placeholder=" ">
<label for="name" class="input__label label">Имя</label>
</div>
<div class="input__block_box">
<div class="input__block input__block_inline">
<input type="email" name="email" id="email" class="form__input input" placeholder=" ">
<label for="email" class="input__label label">E-mail</label>
</div>
<div class="input__block input__block_inline">
<input type="tel" name="tel" id="tel" class="form__input input" placeholder=" ">
<label for="tel" class="input__label label">Телефон</label>
</div>
</div>
<div class="textarea__block input__block">
<textarea name="text" id="text" cols="30" rows="10" class="form__textarea textarea"
placeholder=" "></textarea>
<label for="text" class="textarea__label label">Message</label>
</div>
<button type="submit" class="form__button button">Отправить</button>
</div>
</form>
const forms = document.querySelectorAll('.form')
const message = {
loading: 'img/form/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();
let statusMessage = document.createElement('img');
statusMessage.src = message.loading;
statusMessage.style.cssText = `
display: block;
margin: 0 auto;
`;
form.insertAdjacentElement('afterend', statusMessage);
const formData = new FormData(form);
const json = JSON.stringify(Object.fromEntries(formData.entries()));
postData('/send.php', 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">
<div class="modal__close" data-close>×</div>
<div class="modal__title">${message}</div>
</div>
`;
document.querySelector('.modal').append(thanksModal);
setTimeout(() => {
thanksModal.remove();
prevModalDialog.classList.add('show');
prevModalDialog.classList.remove('hide');
closeModal();
}, 4000);
}
<?php
vardump($__POST)
if (isset($_POST['name'])) {$name = $_POST['name']; if ($name == '') {unset($name);}}
if (isset($_POST['email'])) {$email = $_POST['email']; if ($email == '') {unset($email);}}
if (isset($_POST['phone'])) {$phone = $_POST['phone']; if ($phone == '') {unset($phone);}}
if (isset($_POST['text'])) {$phone = $_POST['text']; if ($text == '') {unset($text);}}
if (isset($name) && isset($email)){
if ($_POST['form']) {$formType = $_POST['form'];}
$address = "info@rig-line.ru";
$message = "Имя: $name \nE-mail: $email \nТелефонный номер: $phone\nForm type: $formType\n\nThis message is generated by submitting contact Form";
$send = mail($address,"Заполнена контактная форма",$text,"Content-type:text/plain; charset = UTF-8"); //
}
?>
Простой
