質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.35%

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 491

score 6

今、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("送信が完了しました!");



?>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

clickbtn_send: async function() {
・
・
・
   await axios
・
・
・
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/06 15:36

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

    キャンセル

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

  • ただいまの回答率 87.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る