The letter comes blank. 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>
  • Deleted the answer. Because I did not understand the question immediately. In the debugger you can see what comes up at $ _POST? In js, you can put new FormData (this. $ Refs.couponForm) into a separate variable and see what gets into it? - Dmitry Kozlov
  • @DmitryKozlov Dropped FormData ( skrinshoter.ru/s/100718/ZwgTSQDX?a ). $ _POST is empty. Made an error output, outputs this: Notice: Undefined variable: nameCoupon . So with two variables. - KEZOV
  • "nameCoupon" does not have such a name in any piece of code above. - Dmitry Kozlov
  • Changed php a bit: skrinshoter.ru/s/100718/RUzLHALO?a - KEZOV

2 answers 2

There are no problems here. You use Vue in a strange way. No need to use FormData. Why not use data , v-model ? Vue for this and need to bind the data.

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

This is not the answer in the classical sense , it is an attempt to draw attention to the use of technology in this context. May allow think, read and do better.

upd. reasoning (to comments)

Usually, each application or component of Vue uses the attribute - data: { .. } , which defines "reactive" variables, and this is one of the main benefits of using such frameworks:

  <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 - allows you to associate input with the tel variable, that is, when the user changes the data in the form, the changes are "instantly" reflected in the application. That saves the developer from "hanging" listeners and processing each change. v-model is a directive that tells Vue to associate a value with the variable specified in it.

If your Vue application is only for decoration and is not used for manipulating and sending data, you can use FormData (...) and jQuery.serialize. Yes, Vue can only be used for validation or for masks, etc. You just need to remember that the data in FormData is raw (raw) and therefore has nothing to do with Vue. Vue allows not only to link these forms, but also to add interception to submit.

Examples of Vue Forms with Validation

  • Explain, please, on what basis is the chain formed tel: this.tel ? The key is the value of the name ΠΈΠ½ΠΏΡƒΡ‚Π° , and the value is the v-model ΠΈΠ½ΠΏΡƒΡ‚Π° ? - KEZOV
  • Also forgot to add that the check added skrinshoter.ru/s/110718/5PEOKMYe?a - KEZOV

It should be used instead of this.$refs.couponForm id for the form. And in the end you get: new FormData(document.getElementById('form')) . Solves the problem