How to submit form data in vue?

C

Captain Cocoa2021-03-17 10:52:17

PHP

Captain Cocoa, 2021-03-17 10:52:17

Vue and axios are connected in the header

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

There is a form

<div class="vueApp">
 <form id="form" method="POST">
        <input type="text" name="name" required="required"/>
        <input type="text" name="phone" required="required"/>
        <input type="submit" value="Отправить"/>
 </form>
<div>

There is a handler in PHP

<?
if((isset($_POST['name'])&&$_POST['name']!="")&&(isset($_POST['phone'])&&$_POST['phone']!="")){ //Проверка отправилось ли наше поля name и не пустые ли они
        $to = '[email protected], [email protected]'; //Почта получателя, через запятую можно указать сколько угодно адресов
        $subject = 'Landing Delonghi EDS'; //Загаловок сообщения
        $message = '
                <html>
                    <head>
                        <title>'.$subject.'</title>
                    </head>
                    <body>
                        <p>Имя: '.$_POST['name'].'</p>
                        <p>Телефон: '.$_POST['phone'].'</p>                        
                    </body>
                </html>'; //Текст нащего сообщения можно использовать HTML теги
        $headers  = "Content-type: text/html; charset=utf-8 \r\n"; //Кодировка письма
        $headers .= "From: Отправитель <[email protected]>\r\n"; //Наименование и почта отправителя
        mail($to, $subject, $message, $headers); //Отправка письма с помощью функции mail
}
?>

In jQuery, I did the send like this:

$(document).ready(function () {
  $("#form").submit(function (e) { //устанавливаем событие отправки для формы с id=form
    e.preventDefault()
    var form_data = $(this).serialize(); //собераем все данные из формы
    $.ajax({
      type: 'POST', //Метод отправки
      url: 'send.php', //путь до php фаила отправителя
      data: form_data,
      success: function (data) { // сoбытиe пoслe удaчнoгo oбрaщeния к сeрвeру и пoлучeния oтвeтa
        $("#success").fancybox().trigger('click');
      }
    });
  });
});

Please tell me how to do a similar form submission on vue?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

W

WapSter, 2021-03-17
@RadCor

snippet