@K1r1llLag

Как передать данные с формы VUE в обработчик PHP?

Подскажите пожалуйста, застрял на этом вопросе. С vue.js вообще не силен, но нужно сделать форму обратной связи на сайте. Форма на .VUE и код на PHP который отправляет письмо на почту, но не передает введенные данные из полей пользователем. Подскажите как правильно вызвать введенные данные в PHP коде?
В PHP вызвал поля вот так:
$name = $_POST['name'];
$phone = $_POST['phone'];
$power = $_POST['power'];
$productivity = $_POST['productivity'];
$power = $_POST['power'];
$presure = $_POST['presure'];
$scope = $_POST['scope'];

А здесь они должны подставляться в письмо:
$title = "Задан вопрос на сайте";
$body = "
<h2>Запрос:</h2>
<b>Имя:</b> $name<br>
<b>Номер телефона:</b> $phone<br><br>
<b>Мощность, кВ:</b> $power<br>
<b>Производительность, м3/мин:</b> $productivity<br><br>
<b>Рабочее давление, бар:</b> $presure<br>
<b>Сфера применения:</b> $scope<br><br>
";

Код самой формы vue:
<template>
  <div class="ui-section feedback" id="feedback">
    <div class="inner">
      <div class="feedback-form">
        <div class="ui-title">Подобрать компрессор</div>
        <form @submit.prevent="submit">

          <div class="row">
            <div class="col-xs-6">
              <div class="ui-field">
                <input type="text" class="ui-input" name="name" placeholder="Ваше имя" v-model="form.name">
              </div>
            </div>

            <div class="col-xs-6">
              <div class="ui-field">
                <input type="tel" class="ui-input" name="phone" placeholder="Контактный телефон*" v-model="form.phone">
              </div>
            </div>

            <div class="col-xs-6">
              <div class="ui-field">
                <input type="text" class="ui-input" name="power" placeholder="Мощность, кВ" v-model="form.power">
              </div>
            </div>

            <div class="col-xs-6">
              <div class="ui-field">
                <input type="text" class="ui-input" name="productivity" placeholder="Производительность, м3/мин" v-model="form.productivity">
              </div>
            </div>

            <div class="col-xs-6">
              <div class="ui-field">
                <input type="text" class="ui-input" name="presure" placeholder="Рабочее давление, бар" v-model="form.presure">
              </div>
            </div>

            <div class="col-xs-6">
              <div class="ui-field">
                <input type="text" class="ui-input" name="scope" placeholder="Сфера применения" v-model="form.scope">
              </div>
            </div>

            <div class="col-xs-6">
              <div class="ui-field">
                <label for="agree" class="ui-checkbox">
                  <input type="checkbox" name="agree" v-model="agree" id="agree">
                  <div class="ui-checkbox-txt">Я согласен(а) на обработку моих персональных данных. <a href="#">Пользовательское соглашение</a></div>
                </label>
              </div>
            </div>

          </div>

          <div class="ui-centered">
            <button class="ui-btn ui-btn-big ui-btn-white" :disabled="!agree">Отправить</button>
          </div>

          
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      agree: false,
      form: {
        name: '',
        phone: '',
        power: '',
        productivity: '',
        presure: '',
        scope: ''
      }
    }
  },
  methods: {
    async submit() {
      try {
        // console.log(this.form)
        const response = await fetch('https://lite/send.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.form)
        })
        // console.log(response)
        //смотрим ответ, если нужно
        // const answer = await response.json();
        // console.log(answer);
      } catch (err) {
        console.error('Ошибка:', err);
      }
    }
  }
}

</script>

Направьте плиз, работал только с html формами.
  • Вопрос задан
  • 240 просмотров
Решения вопроса 1
Вместо:
$name = $_POST['name'];
$phone = $_POST['phone'];
$power = $_POST['power'];
$productivity = $_POST['productivity'];
$power = $_POST['power'];
$presure = $_POST['presure'];
$scope = $_POST['scope'];


Просто сделайте:

$request = json_decode(file_get_contents('php://input'));
$name = $request->name;
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Fragster
@Fragster
помогло? отметь решением!
Проще всего получить formdata прямо из элемента формы , для этого можно на форму навесить ref. Ну, или сгенерить formdata из реактивных свойств компонента. Вообще пока не очень понятно, зачем тут vue. Это если не хочется менять PHP часть.
Или нужно заменить $_POST на json_decode и получение тела запроса из php://input, если не хочется менять vue часть.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы