Письмо приходит пустым на почту

188

27 августа 2018, 15:20

Письмо приходит пустым. JS:

registerCoupon() {
    axios.post('final/php/registerCoupon.php', new FormData(this.$refs.couponForm))
      .then((res) => {
        if ( res != null ) {
          this.couponPrinter = true;
          this.tel = '';
          this.surname = '';
          console.log(res);
          console.log(this.tel);
          console.log(this.surname);
        } else {
          this.couponPrinter = false;
          alert('Возникла ошибка! Попробуйте позже')
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }

PHP:

<?php
  $recepient = "почта";
  $sitename = "mh36.ru";
  $name = $_POST["name"];
  $tel = $_POST["tel"];
  $date = trim($_POST['none']);
  $message = "Имя Фамилия: $name \nНомер телефона: $tel \nДата купона: $date";
  $pagetitle = "Бронирование купона";
  mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");
?>

HTML:

<form @submit.prevent="registerCoupon()" method="post" ref="couponForm">
            <input type="text" name="name" pattern='[а-яА-ЯёЁ]{4,64} [а-яА-ЯёЁ]{4,64}' v-model="surname" placeholder="Введите ваше имя и фамилию" required :title='titleGen'>
            <input type="tel" name="tel" v-model="tel" v-mask="'+7 (###) ###-##-##'" placeholder="Введите ваш номер телефона" required title="Используйте только цифры">
            <button  type="submit">Отправить</button>
            <transition name="fade">
              <div class="p-coupon__activate" v-if="couponPrinter">
                <p>Купон активирован! Вам осталось его распечатать и предъявить администратору. В один день вы можете активировать только один купон!</p>
                <button @click="printCoupon(index)">Распечатать</button>
              </div>
            </transition>
          </form>

Answer 1

Здесь нет проблем. Вы используете Vue странным образом. Не нужно использовать FormData. Почему не используется data, v-model? Vue для этого и нужен, чтобы связывать данные.

axios
  .post(url, {tel: this.tel, surname: this.surname})
  .then(response => { /*...*/ })
  .catch(err => console.log(err))

для данных нужна валидация перед отправкой
для данных нужна валидация на сервере, хотя бы isset(..) или empty(...), но лучше еще и "санитизация" перед отправкой

это не ответ в классическом понимании, это попытка обратить внимание на использование технологии в данном контексте. Может позволит подумать, почитать и сделать лучше.

upd. рассуждения (к комментариям)

Обычно в каждом приложении или компоненте Vue используется атрибут - data: { .. }, который определяет "реактивные" переменные и именно в этом одна из основных выгод от использования подобных фреймворков:

 <form @submit.prevent="register">
    <input ... v-model="tel" v-validate="'required'">
    ...
 </form>

 new Vue({
    data: {
      tel: '',
      surname: '',
      // или
      coupon: {
        tel: '',
        surname: '' 
      }
    },
    methods: {
      register(){
        // do: this.surname, this.tel
        axios
         .post(url, {tel: this.tel, surname: this.surname})
         .then(response => { /*...*/ })
         .catch(err => console.log(err))
      }
    }
 })

v-model - позволяет связать input с переменной tel, то есть при изменении данных пользователем в форме, изменения "мгновенно" отражаются в приложении. Что избавляет разработчика от "навешивания" слушателей и обработки каждого изменения. v-model - это директива, которая говорит Vue - связать значение с переменной указанной в ней.

Если же в вашем приложении Vue только для декорации, и не используется для манипуляции и отправки данных, можно и FormData(...) и jQuery.serialize Да, Vue может использоваться только для валидации или для масок и т.д. Просто нужно помнить, что данные в FormData чистые (raw) и значит никак не связаны c Vue. Vue же позволяет не только связать данные формы, но и добавить перехват на submit.

Примеры Vue форм с валидацией

Answer 2

Нужно использовать вместо this.$refs.couponForm id для формы. И в итоге получиться: new FormData(document.getElementById('form')). Решает проблему