お問合せ送信で送信ボタンを押しても送信されない

今、HTMLサイトのコンタクトフォームに
Vue.jsでバリデーションなどをつけて
ajax、phpで送信機能をつけようとしているのですが
どうしても送信ボタンを押してもうまくいきません...
サーバーにアップして送信ボタンを押してみても送信されず。。
デベロッパーツールでみても特にエラーも出ないんです。。

書き方は全てあっていると思うのですが...
何かPHPなどに間違いはありますでしょうか。。？
ajaxの設定などもサイトの解説通りしたのですが。。。

すみませんがアドバイスいただけますと幸いです...

階層は
・index.php
・js - mail.js
・functions - mail.php
です。

index.php
(拡張子をphpに変えました..)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>コンタクトフォームテスト</title>

    <!-- ______________css______________________ -->
    <link rel="stylesheet" type="text/css" href="css/html5reset-1.6.1.css" />
    <link rel="stylesheet" type="text/css" href="css/common_pc.css" />
    
    <!-- ______________js______________________ -->
    <!-- google -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>

  </head>

 <body>

 <!-- contact -->
 <section id="c" class="contact contact_overlay">
    <div class="contactInner">
      <h1 class="line-1 typewriter_c fadein">Contact</h1>

      <p class="contact_catch fadein">＊お気軽にご連絡くだサイ＊</p>

  <div id="form" class="formArea fadein">

<!-- -------------name -->
<div class="item">
    <label class="label_block label_name" for="name">お名前<span class="required">必須</span></label>
  <!-- inputdataがfalseの時に表示 -->
  <div v-bind:class="{delatearea : inputdata}">
        <input id="name" class="inputs" type="text" name="name" autocomplete="off" required v-model="namearea">
      </div>
<!-- makesureがfalseの時に表示 -->
<div v-bind:class="{delatearea : makesure}">
{{namearea}}
</div>
<!-- 入力されていません表記にする（メール以外） -->
<p class="erroebox">{{namemiss}}</p>
</div>


<!-- -------------mail -->
<div class="item">
    <label class="label_block" for="email">メールアドレス<span class="required">必須</span></label>
   <!-- inputdataがfalseの時に表示 -->
  <div v-bind:class="{delatearea : inputdata}">
        <input id="email" class="inputs"  type="email" name="email" autocomplete="off" required v-model="mailarea">
      </div>
<!-- makesureがfalseの時に表示 -->
      <div v-bind:class="{delatearea : makesure}">
        {{mailarea}}
      </div>
      <p class="erroebox">{{mailmiss}}</p>
      </div>


<!-- -------------tell -->
<div class="item">
    <label class="label_block" for="phone">電話番号</label>
   <!-- inputdataがfalseの時に表示 -->
    <div v-bind:class="{delatearea : inputdata}">
<input id="phone" class="inputs" type="number" name="phone" autocomplete="off" v-model="tellarea">
</div>
<!-- makesureがfalseの時に表示 -->
<div v-bind:class="{delatearea : makesure}">
    {{tellarea}}
  </div>
</div>


<!-- -------------request -->
<div class="item">
<p class="label_block">ご依頼内容<span class="required">必須</span><span class="required multiple">複数可能</span></p>

<!-- inputdataがfalseの時に表示 -->
<div v-bind:class="{delatearea : inputdata}">

<input id="check_1" class="check_none" type="checkbox" name="request" value="デザインのみ" v-model="checkedarea">
<label class="check_label" for="check_1">デザインのみ</label>
<input id="check_2" class="check_none" type="checkbox" name="request" value="デザイン・コーディング" v-model="checkedarea">

<label class="check_label" for="check_2">デザイン・コーディング</label>

<input id="check_3" class="check_none" type="checkbox" name="request" value="LPサイト" v-model="checkedarea">
<label class="check_label" for="check_3">LPサイト</label>

<br class="br_pc">

<input id="check_4" class="check_none" type="checkbox" name="request" value="Wordpress化" v-model="checkedarea">
<label class="check_label" for="check_4">Wordpress化</label>

<input id="check_5" class="check_none" type="checkbox" name="request" value="レスポンシブ化" v-model="checkedarea">
<label class="check_label" for="check_5">レスポンシブ化</label>

<input id="check_6" class="check_none" type="checkbox" name="request" value="その他" v-model="checkedarea">
<label class="check_label" for="check_6">その他</label>
</div>

<!-- makesureがfalseの時に表示 -->
<div v-bind:class="{delatearea : makesure}">
    {{checkedarea}}
 
  </div>


</div>



<!-- -------------detail -->
<div class="item">
    <label class="label_block" for="detail">詳細(ご予算などもご記載ください)<span class="required">必須</span></label>
 <!-- inputdataがfalseの時に表示 -->
 <div v-bind:class="{delatearea : inputdata}">
  <textarea name="detail" id="detail" class="inputs" cols="30" rows="10" required v-model="detailarea"></textarea>
  </div>
  <!-- makesureがfalseの時に表示 -->
<div v-bind:class="{delatearea : makesure}">
    {{detailarea}}
  </div>
  </div>


<!-- -------------deadline -->
<div class="item">
    <label class="label_block" for="deadline">ご希望の納期（目安）<span class="required">必須</span></label>
  <!-- inputdataがfalseの時に表示 -->
 <div v-bind:class="{delatearea : inputdata}">
  <input id="deadline" class="inputs" type="text" name="deadline" autocomplete="off" required v-model="deadlinearea">
  </div>

<!-- makesureがfalse時に表示 -->
<div v-bind:class="{delatearea : makesure}">
    {{deadlinearea}}
  </div>
</div>

<!-- -------------送信ボタン -->
<!-- inputdataがfalseの時に表示 -->
  <div class="btn_area" v-bind:class="{delatearea : inputdata}">
<button class="normal_btn" v-on:click="clickbtn">確認</button>
</div>

<div class="btn_area" v-bind:class="{delatearea : makesure}">
    <button class="btn_makesure" v-on:click="clickbtn_back">戻る</button>
    <button class="btn_makesure" v-on:click="clickbtn_send">送信</button>

</div>

</div>

</div>
      </section>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript" src="js/mail.js"></script>

</body>
</html>

js/mail.js

var mailerrorbox = "true";
var nameerrorbox = "true";

var form = new Vue({
  el: "#form",
  data: {
    namearea: "",
    mailarea: "",
    tellarea: "",
    detailarea: "",
    deadlinearea: "",
    checkedarea: [],

    inputdata: false,
    makesure: true
  },
  computed: {
    mailmiss: function() {
      let maildata = this.mailarea;
      mailerrorbox = "true";
      if (!maildata) {
        return "入力してください";
      } else if (maildata.match(/.+@.+..+/) == null) {
        return "メールの形式が間違っています";
      } else {
        mailerrorbox = "false";
      }
    },

    namemiss: function() {
      let namedata = this.namearea;
      nameerrorbox = "true";

      if (!namedata) {
        return "入力してください";
      } else {
        nameerrorbox = "false";
      }
    }
  },
  methods: {
    clickbtn: function() {
      this.inputdata = true;
      this.makesure = false;
    },
    clickbtn_back: function() {
      this.inputdata = false;
      this.makesure = true;
    },
    clickbtn_send: function() {
      if (mailerrorbox == "false" && nameerrorbox == "false") {
        let params = new URLSearchParams();
        //mailareaという箱の中にdata、mailareに入力された内容を入れます。
        params.append("mailarea", this.namearea);
        //nameareaという箱の中にdata、nameareaに入力された内容を入れます。
        params.append("namearea", this.mailarea);
        //textboxareaという箱の中にdata、textboxareaに入力された内容を入れます。
        params.append("tellarea", this.tellarea);
        params.append("detailarea", this.detailarea);
        params.append("deadlinearea", this.deadlinearea);

        //axiosという機能を使いデータを投げます。
        axios
          .post("../functions/mail.php", params)
          //PHPで処理された結果がresponseに帰ってきます。
          .then(function(response) {
            //PHPで処理された結果はresponse.dataで呼び出せます。
            //今回は、送信完了メッセージが入っています。
            //詳しくはPHPファイルを確認してみてください。
            //alertで送信完了メッセージを出します。
            alert(response.data);
            //フォームのトップページにリダイレクトします。
            document.location = "./";
          })
          .catch(function(error) {
            //何かエラーが起きたらconsole.logにエラーを表示させます。
            console.log("error");
          });
      }
    }
  }
});

functions/mail.php

<?php

$namearea = htmlspecialchars($_POST['namearea'], ENT_QUOTES);
$mailarea = htmlspecialchars($_POST['mailarea'], ENT_QUOTES);
$tellarea = htmlspecialchars($_POST['tellarea'], ENT_QUOTES);
$detailarea = htmlspecialchars($_POST['detailarea'], ENT_QUOTES);
$deadlinearea = htmlspecialchars($_POST['deadlinearea'], ENT_QUOTES);
$checkedarea = htmlspecialchars($_POST['checkedarea'], ENT_QUOTES);

header("Content-Type:text/html; charset=UTF-8");
mb_language("japanese");
mb_internal_encoding("utf-8");

$mail = "自分のメールアドレス@gmail.com";

$sub1 = "[自動返信]お問い合わせが完了しました";

$mail_to = $mailarea;

$messegeall .= "〇〇のウェブサイトへのお問合せありがとうございます。\n";
$messegeall .= "翌営業日以内にお返事させて頂きますので今しばらくお待ちください。\n";
$messegeall .= "もしお返事が届かない場合は、お手数ですが下記に記載しておりますメールアドレスまで直接ご連絡ください。\n";
$messegeall .= "\n";
$messegeall .= "─お問い合せ内容の確認─────────────────\n";
$messegeall .= "\n";
$messegeall .= "お名前：".$namearea."\n";
$messegeall .= "メールアドレス：".$mailarea."\n";
$messegeall .= "電話番号：".$tellarea."\n";
$messegeall .= "ご依頼内容：".$detailarea."\n";
$messegeall .= "詳細：\n".$namearea."\n";
$messegeall .= "ご希望の納期：".$checkedarea."\n";
$messegeall .= "\n";
$messegeall .= "─────────────────────────\n";
$messegeall .= "\n";
$messegeall .= "============================================\n";
$messegeall .= "このメールは自動送信です。\n";
$messegeall .= "お心当たりのない方は、お手数をおかけいたしますが、\n";
$messegeall .= "下記メールアドレスまでご連絡ください。\n";
$messegeall .= "============================================\n";

$success1 = mb_send_mail($mail_to,$sub1,$messegeall,"From:".$mail);
$success2 = mb_send_mail($mail,$sub1,$messegeall,"From:".$mail_to);

header('Content-type: application/json');
echo json_encode("送信が完了しました！");



?>

行動規範の内容に同意します

回答1件

JavaScript
1clickbtn_send: async function() {
2・
3・
4・
5　　　await axios
6・
7・
8・
9}

投稿2019/09/06 00:00

yxt003

総合スコア184

ooo9999

2019/09/06 06:36

どういった意味でしょうか。。？

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

お問合せ送信で送信ボタンを押しても送信されない

関連した質問