vue form axios post not submitting

Question

I have the following code for my fom

<form @submit="onSubmit" method="POST">
  <div class="mb-4">
    <label class="block" for="name">
      <span class="text-gray-900">Full name</span>
      <input
        class="form-input mt-1 block w-full outline-none"
        placeholder="Sherlock Holmes"
        v-model="formData.name"
        required
        id="name"
        name="name"
        type="text"
      />
    </label>
  </div>

  <div class="mb-4">
    <label class="block" for="email">
      <span class="text-gray-900">Email address</span>
      <input
        class="form-input mt-1 block w-full outline-none"
        placeholder="sherlock@bakerstreet.com"
        v-model="formData.email"
        required
        id="email"
        name="email"
        type="email"
      />
    </label>
  </div>

  <div class="mb-4">
    <label class="block" for="department">
      <span class="text-gray-700">Department</span>
      <select
        class="form-select mt-1 block w-full outline-none"
        name="deptid"
        v-model="formData.deptid"
      >
        <option value="1">General Support</option>
        <option value="5">Billing Support</option>
        <option value="2">Hosting Support</option>
        <option value="3">Domain Support</option>
        <option value="4">Game Support</option>
      </select>
    </label>
  </div>

  <div class="mb-4">
    <label class="block" for="message">
      <span class="text-gray-900">Message</span>
      <textarea
        class="form-input mt-1 block w-full outline-none h-56 resize-none"
        placeholder="Enter your message here"
        v-model="formData.message"
        name="message"
        id="message"
        cols="30"
        rows="10"
        required
      />
    </label>
  </div>

  <div class="flex mt-6">
    <label class="flex items-center">
      <input type="checkbox" class="form-checkbox" />
      <span class="ml-2">
        I agree to the
        <a href="#" class="underline">privacy policy</a>
      </span>
    </label>
  </div>

  <div class="flex mt-6">
    <label class="flex items-center">
      <button
        type="submit"
        name="ticketSubmit"
        value="Submit"
        class="flex items-center py-3 px-6 border rounded bg-gray-800 hover:bg-gray-900 font-medium text-white transition duration-300 ease-in-out"
      >
        <i class="fas fa-paper-plane mr-4"></i>
        Send
      </button>
    </label>
  </div>
</form>

and the following script

<script>
import axios from "axios";
import FlashMessage from "../components/FlashMessage";
import FeaturesWGrid from "../components/FeaturesWGrid";
import Grid from "../components/Grid";
import GridItem from "../components/GridItem";

export default {
  name: "Contact",
  components: {
    FlashMessage,
    FeaturesWGrid,
    Grid,
    GridItem
  },
  data() {
    return {
      showMsg: false,
      formData: {
        name: "",
        email: "",
        deptid: "1",
        message: ""
      }
    };
  },
  methods: {
    onSubmit() {
      axios
        .post("https://hostedcarbon.com/backend/contact.php", this.formData)
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.error(err);
        });

      this.showMsg = true;
      setTimeout(() => {
        this.showMsg = false;
      }, 3000);
    }
  }
};
</script>

If I do the following <form action="/backend/contact.php" method="POST"> the form works so contact.php is working. So I'm not sure why the axios post isn't working.

Here is the PHP code minus the API keys (which are active)

<?php
    $whmcsUrl = "https://billing.hostedcarbon.com/";
    $api_identifier = "";
    $api_secret = "";
    $name = "";
    $email = "";
    $deptid = "";
    $message = "";

    if (isset($_POST['name'])) {
        $name = $_POST['name'];
    }

    if (isset($_POST['email'])) {
        $email = $_POST['email'];
    }

    if (isset($_POST['deptid'])) {
        $deptid = $_POST['deptid'];
    }

    if (isset($_POST['message'])) {
        $message = $_POST['message'];
    }

    // Build post values
    $postfields = array(
        'action' => 'OpenTicket',
        'identifier' => $api_identifier,
        'secret' => $api_secret,
        'deptid' => $deptid,
        'name' => $name,
        'email' => $email,
        "subject" => "Contact form Inquiry from $name",
        'message' => $message,
        'priority' => 'Medium',
        'useMarkdown' => 'false',
        'responsetype' => 'json',
    );

    // Call the API
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $whmcsUrl . 'includes/api.php');
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_TIMEOUT, 30);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($postfields));
    $response = curl_exec($ch);
    if (curl_error($ch)) {
    die('Unable to connect: ' . curl_errno($ch) . ' - ' . curl_error($ch));
    }
    curl_close($ch);

    // Decode response
    $jsonData = json_decode($response, true);

    // Dump array structure for inspection
    var_dump($jsonData);
    var_dump($_POST)
?>

Answer 1

You're calling this.formdata instead of this.formData? Edit: notice: you're using

onSubmit: function () {}

Don't use the normal function since this here refers to the current function use ES6 function

onSubmit() {}

Edit:

var form = new FormData()

form.append('name', this.formData.name)
form.append('email', this.formData.email)
form.append('deptid', this.formData.deptid)
form.append('message', this.formData.message)

  axios.post("https://hostedcarbon.com/backend/contact.php", form)
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.error(err);
  });