JS Ajax Не отправляются данные с формы в файл php

165

15 ноября 2021, 01:40

На сайте установлена тема Divi. В ней я не разбираюсь, но задача была отправить форму на почту админу. Что имею

HTML:

<div class="form-phone-desktop">
    <div class="form-phone-desktop-close"></div>
    <form action="/send_phone.php" method="POST" class="form-phone-desktop-form" onsubmit="return submitForm(this);">
        <input type="text" name="form_name" class="form-phone-desktop-input">
        <input type="text" name="form_phone" class="form-phone-desktop-input">
        <button type="submit"  class="et_pb_contact_submit et_pb_button" >Зв'язатися с нами</button>
    </form>
</div>

JS v1:

function submitForm(oFormElement) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function(){ alert ('success'+xhr.responseText); } // success case
  xhr.onerror = function(){ alert (xhr.responseText); } // failure case
  xhr.open (oFormElement.method, oFormElement.action, true);
  xhr.send (new FormData (oFormElement));
  return false;
}

PHP send_phone:

<?php
header("Content-Type: text/html; charset=utf-8");
//Получаем данные из глобальной переменной $_POST, так как мы передаем данные методом GET
    $name = $_POST['form_name']; // Вытаскиваем имя в переменную
    $phone = $_POST['form_phone']; // Вытаскиваем имя в переменную  
   $theme = $_POST['form_pracic_name']; 

  $from = 'f@gmail.com'; 
    $to = 't@gmail.com'; // Задаем получателя письма  
    $subject = "Новый запрос на звонок"; // Задаем тему письма
    $templateToMe = "
    <html>
<head>
  <title>Сообщение </title>
</head>
<body>
  <p>Вам сообщение</p> 
  <table>
    <tr>
      <th>Имя: </th><th>$name</th>
    </tr> 
    <tr>
      <td>Телефон</td><td>$phone</td>
    </tr>  
  </table>
</body>
</html>
    ";
    // Для отправки HTML-письма должен быть установлен заголовок Content-type
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
$headers .= "From: $from" . "\r\n"; 
        mail($to,$subject, $templateToMe, $headers);   
?>

Когда появляется алерт, то выдает пустое сообщение. Нужен чистый JS

Так же использовал похожий код JS v2:

function myFunction() {
    var elements = document.getElementsByClassName("form-phone-desktop-form");
    var formData = new FormData(); 
    for(var i=0; i<elements.length; i++)
    {
        formData.append(elements[i].name, elements[i].value);
    }
    var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function()
        {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
            {
                alert(this.responseText);
            }
        }
        xmlHttp.open("post", "/send_phone.php"); 
        xmlHttp.send(); 
}