CODEWITHSUNDEEP
phphtmlformsaxiosnuxt.js
Mateusz Kawka
Mateusz Kawka

Reputation: 422

NuxtJS + axios + php mail - php don't grab data from form

I have problem with my form, basically mail is sending but without my data.For me it looks fine, response show: 

baseURL: "http://localhost:3000/"
data: "{"name":"asda","email":"[email protected]","message":"asdad"}"

Data is regular json but on both sides base url show localhost maybe that is the problem ?

P.S I tried from localhost and server as well but result was the same.

NuxtJS send methods: 

export default {
  name: "Contact",
  data() {
    return {
      formMessage: "Form succesfull send",
      form: {
        name: "asdad",
        email: "[email protected]",
        message: "czxczsdqw"
      }
    };
  },
  computed: {
    formValid() {
      return Object.keys(this.fields).every(field => {
        return this.fields[field] && this.fields[field].valid;
      });
    }
  },
  methods: {
    formSubmit(e) {
      e.preventDefault();
      this.$axios
        .post(
          "url-to-php-script",
          JSON.stringify(this.form))
        .then(res => {
          console.log(res);
          this.formMessage = "Form successfull send";
        });
    }
  }
};

And php mail file: 

<?php

$name = $_POST['name'];
$from = $_POST['email'];
$message = $_POST['message'];

$message_content = "<h1>Name: $name</h1>";
$message_content .= "<p>From: $from</p>";
$message_content .= "<p>Message: $message</p>";
$to_email = '[email protected]';
$subject = "Mail from kawkamateusz.pl";
$headers[] = 'MIME-Version: 1.0';
$headers[] = 'Content-type: text/html; charset=UTF-8';
$headers[] = 'kawkamateusz.pl';

mail($to_email, $subject, $message_content, implode("\r\n", $headers));

?>

**Sorry for english if something is unclear, I'm not native

Upvotes: 3

Views: 748

Answers (1)

Mateusz Kawka
Mateusz Kawka

Reputation: 422

I was used fetch with URLSearchParams and everything works fine - for future visitors.

fetch(`xxx.php`, {
        method: "post",
        body: new URLSearchParams(this.form)
      })

Upvotes: 3

Related Questions