Как передать массив в PHP через AJAX и отправить его на email?

Question

[Артем]

Есть вот такой код, где я создаю массив и пытаюсь передать его с помощью AJAX в PHP-файл, а там отправить себе на email.
Вот HTML:

<select id="id">
  <option>Раз</option>
  <option>Два</option>
  <option>Три</option>
</select>

<select id="super">
  <option>Четыре</option>
  <option>Пять</option>
  <option>Шесть</option>
</select>

<select id="puper">
  <option>Семь</option>
  <option>Восемь</option>
  <option>Девять</option>
</select>

<form>
<input type="text" name="name" placeholder="Как к вам обращаться">
<input type="email" name="email" placeholder="Ваш email">
<input type="submit" id="btn" value="Отправить">
</form>

Вот JS:

var idFin = $("#id option:selected").text();
var superFin = $("#super option:selected").text();
var puperFin = $("#puper option:selected").text();
var allData = {
    id: idFin,
    super: superFin,
    puper: puperFin,
    name: "",
    email: "",
};
var test = [];

$('#btn').click(function () {
  if ($("input[type='email']").val() == "") {
    $("input[type='email']").css("color","red");
    return false;
  };
});    

$("form").submit(function () {
  allData[name] = $("input[type='text']").val();
  allData[email] = $("input[type='email']").val();
  test.push(allData);
  $.ajax({
    type: "POST",
    url: "mail.php",
    data: {test: test},
    dataType: "json",
    success: function () {
      alert("Все супер!");
    },
    error: function(){
      console.log('error');
    }
  });
  return false;
});

А вот php, который вроде как должен отправлять мне сообщение:

<?php

$recepient = "[e-mail]";

$id= trim($_POST["id"]);
$super = trim($_POST["super"]);
$puper = trim($_POST["puper"]);
$name = trim($_POST["name"]);
$email = trim($_POST["email"]);
$message = "Id: $id \nSuper: $super \nPuper: $puper \nИмя: $name \nE-mail: $email";

$pagetitle = "Новое сообщение";

mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");
?>

Но почему-то ничего не выходит, страница перезагружается при отправке формы, ошибок в консоли не видно и сообщение соответственно не приходит. В каком месте я сделал ошибку? Подскажите пожалуйста!

Comments

[ivankomolin]

Не хватает html для полноты картины и возможности что-либо подсказать.

[Артем]

ivankomolin, секунду

[Василий Варюхин]

Артем, Вам принципиально что-бы инпуты были не в форме?

[Артем]

Hocopor, да, это ведь только часть кода

[Василий Варюхин]

Артем, Посмотрите

Запрос отправляет, форму не перезагружает.

[Артем]

Hocopor, спасибо, то есть прикол в том чтобы собирать массив внутри функции с аяксом? а как потом разбирать этот массив в php, подскажите пожалуйста

[Василий Варюхин]

Артем, Нет. Ну собирать нужно ведь непосредственно перед отправкой, верно?
на php var_dump($_POST); а там увидите.

upd. из php при ajax запросе можно вернуть return $_POST; и в консоли увидите результат. Так как мы уже написали

success: function(data) {
    console.log(data);
}

[Артем]

Hocopor, спасибо, сейчас буду пробовать

[Артем]

Hocopor, у меня как-то очень странно получилось - массив передается, выполняется сам PHP, но запускается функция ошибки. Перепроверил все уже 10 раз и ничего не нашел. Помогите пожалуйста, может тут что-то банальное, а я просто в силу неопытности не понимаю

$("#form").submit(function (e) {
        if ($(".inptText input[type='text']").val() == "" && $("input[type='tel']").val().length < 16) {
            $("input[type='tel']").addClass('err');
            $(".inptText input[type='text']").addClass('err');
            e.preventDefault();
        } else if ($("input[type='tel']").val().length < 16) {
            $("input[type='tel']").addClass('err');
            e.preventDefault();
        } else if ($(".inptText input[type='text']").val() == "") {
            $(".inptText input[type='text']").addClass('err');
            e.preventDefault();
        } else {
            var data = {
                id: idFin,
                breed: breedFin,
                wet: wetFin,
                clas: clasFin,
                size: sizeFin,
                quantity: quantityFin,
                quanType: quTypeFin,
                cost: costFin,
                delivery: deliveryFin,
                deliveryCost: deliveryCostFin,
                finalCost: finalCostFin,
                name: $(".inptText input[type='text']").val(),
                phone: $(".inptText input[type='tel']").val(),
                email: $(".inptText input[type='email']").val(),
            };

            $.ajax({
                type: "POST",
                url: "mail.php",
                data: data,
                dataType: "json",
                success: function () {
                    alert("Все отправлено!");
                },
                error: function () {
                    alert("Ошибка");
                }
            });
            e.preventDefault();
        };
    });

а вот PHP:

<?php

$recepient = "[e-mail]";
$sitename = "Обрезная доска";

$id = trim($_POST["id"]);
$breed = trim($_POST["breed"]);
$wet = trim($_POST["wet"]);
$clas = trim($_POST["clas"]);
$size = trim($_POST["size"]);
$quantity = trim($_POST["quantity"]);
$quanType = trim($_POST["quanType"]);
$cost = trim($_POST["cost"]);
$delivery = trim($_POST["delivery"]);
$deliveryCost = trim($_POST["deliveryCost"]);
$finalCost = trim($_POST["finalCost"]);
$name = trim($_POST["name"]);
$phone = trim($_POST["phone"]);
$email = trim($_POST["email"]);

$message = "ID: $id \nПорода: $breed \nВлажность: $wet \nСорт: $clas \nРазмер: $size \nКоличество: $quantity $quanType \nСтоимость: $cost руб. \nДоставка: $delivery \nСтоимость доставки: $deliveryCost руб. \nОбщая стоимость: $finalCost руб. \nИмя: $name \nТелефон: $phone \nEmail: $email";

$pagetitle = "Новая заявка с сайта";

mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");

?>

[Василий Варюхин]

var data = {
                id: idFin,
                breed: breedFin,
                wet: wetFin,
                clas: clasFin,
                size: sizeFin,
                quantity: quantityFin,
                quanType: quTypeFin,
                cost: costFin,
                delivery: deliveryFin,
                deliveryCost: deliveryCostFin,
                finalCost: finalCostFin,
                name: $(".inptText input[type='text']").val(),
                phone: $(".inptText input[type='tel']").val(),
                email: $(".inptText input[type='email']").val(), <-------
            };

Артем, Последня запятая лишняя.

[Артем]

Hocopor, блин, спасибо, но это не решило проблему. Все равно выполняется ошибка. А может ли быть проблема в типе данных или настройке сервера?

[Василий Варюхин]

Артем,

$.ajax({
                type: "POST",
                url: "mail.php",
                data: data,
                dataType: "json",
                success: function (data) {
                    console.log(data);
                },
                error: function (data) {
                    console.log(data);
                }
            });

Функции success и error принимают параметры. Смотрите что там.

Answer 1

[tyzberd]

Зачем его создавать при клике

$('#btn').click(function () {
  allData = {
    id: idFin,
    super: superFin,
    puper: puperFin,
    name: "",
    email: "",
  }
});

тут нужны кавычки allData["name"]
или так allData.name

Comments

[tyzberd]

тут тоже не правильно

$message = "Id: $id \nSuper: $super \nPuper: $puper \nИмя: $name \nE-mail: $email";

нужно
$message = "Id:" . $id . "\nSuper:" . $super;

[tyzberd]

вообще для формы есть .serialize() если вы файлы не отправляете.
а остальные данные можно в скрытые input добавить

[Артем]

tyzberd, я вот тоже о скрытых input думал, но предположил что это костыли и есть нормальные решения для этого