Получение данных формы, отправленных при помощи XMLHttpRequest() Здравствуйте, подскажите пожалуйста, как получить данные с input, и отправить их на почту? Использую объект XMLHttpRequest(), для передачи формы в обработчик, но не удается получить значения input, и отправить их на почту. Письмо приходит пустое. Смотрите код ниже... JS Код (Javascript): function feedbackForm(formItem){ let message = { loading: 'Loading...', success: 'Thank you, we will contact you shortly!', failure: 'Something went wrong...' }; let form = document.querySelector(formItem), input = form.getElementsByTagName('input'), statusMessage = document.createElement('div'); statusMessage.classList.add('status'); form.addEventListener('submit', function(event){ event.preventDefault(); form.appendChild(statusMessage); let request = new XMLHttpRequest(); request.open('POST', 'server.php'); request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); let formData = new FormData(form); request.send(formData); request.addEventListener('readystatechange', function(){ if(request.readyState < 4){ statusMessage.innerHTML = message.loading; } else if(request.readyState === 4 && request.status == 200){ statusMessage.innerHTML = message.success; } else{ statusMessage.innerHTML = message.failure; } }); for(let i = 0; i < input.length; i++){ input[i].value = ''; } }); } feedbackForm('.main-form'); PHP PHP: $to = "mymail@gmail.com"; $subject = "Заголовок письма"; $from = trim($_POST["email"]); $tel = trim($_POST["tel"]); $headers = "From: $from\r\nReply-to: $from\r\nContent-type: text/plain; charset=utf-8\r\n"; $message = "From: $from\n\nPhone: $tel\n\n"; mail($to, $subject, $message, $headers);
посмотрите в консоли - а данные вообще отправляются? вставьте лог, и посмотрите - действительно ли там что-то есть? Код (Javascript): input = form.getElementsByTagName('input'), console.log(input); Имхо, тут массив получет
Да, инпуты получены, и network пишет что данные отправлены HTMLCollection(2) [input, input, email: input, tel: input]
Выкиньте ЭТО (я про «код» обработчика) на помойку. Или вкуриваем маны или обращаемся к спецам, чтобы вам написали норм. обработчик.
кароче что обработчик js что бек - в топку 1) почему не JQuery, Axios или еще чего в пару строк, а какой то древний XMLHttpRequest ? 2) нужно понимать что делаете. input получаете - но никуда его не передаете, смотрите код 3) даже если представить что догадаетесь как передать - там два элемента, а не один как вы думаете - ,берите конкретный элемент по конкретному id
@TheSanches просто накидал, потестите: Код (Javascript): <div class="main-form"> <form method="post"> <input type="email" name="email"> <label for="email"> Email</label><br><br> <input type="number" name="tel"> <label for="tel"> Phone</label><br><br> <input type="submit" value="Submit"> </form> <div> <script> document.addEventListener('DOMContentLoaded', function() { var form = document.querySelector(".main-form form"); form.addEventListener('submit', function(event){ event.preventDefault(); var formData = new FormData(), input = form.querySelectorAll("input"); [].forEach.call( input, function( item ){ var name = item.getAttribute('name'); if(name){ formData.append(name, item.value); } }); formAjax('server.php', formData, function(data){ console.log(data); }); }); }); function formAjax(url, form, success) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); xhr.open('POST', url); xhr.onreadystatechange = function() { if (xhr.readyState>3 && xhr.status==200) { success(xhr.responseText); } if (xhr.status==500) { if( xhr.responseText.length !== 0 && log === false){ console.log(xhr.responseText); } } }; xhr.send(form); return xhr; } </script> server.php PHP: <?php if( isset($_POST["email"], $_POST["tel"] ) ) { // $to = "mymail@gmail.com"; // $subject = "Заголовок письма"; // $from = trim($_POST["email"]); // $tel = trim($_POST["tel"]); // $headers = "From: $from\r\nReply-to: $from\r\nContent-type: text/plain; charset=utf-8\r\n"; // $message = "From: $from\n\nPhone: $tel\n\n"; // mail($to, $subject, $message, $headers); } $json = json_encode($_POST); echo $json;
1) Потому что, цель научиться работать с нативным кодом 2) Код (Javascript): let formData = new FormData(form); request.send(formData); --- Добавлено --- Я научился этому коду на платных курсах, а вы говорите, на помойку)) --- Добавлено --- --- Добавлено --- Работает, большое спасибо.
В консоли отчетливо видно, что данные передаются, вопрос в том, как их обработать в php файле Код (Javascript): ------WebKitFormBoundaryRyYGSqB6S5qfoYQK Content-Disposition: form-data; name: "email" test@mail.ru ------WebKitFormBoundaryRyYGSqB6S5qfoYQK Content-Disposition: form-data; name="tel" 6666666 ------WebKitFormBoundaryRyYGSqB6S5qfoYQK--
Или вы плохо учились, или вас развели на деньги --- Добавлено --- var_dump($_POST) на сервере норм. воспринимает эти данные?