PHP

シンプルフォームAPI

2017年11月9日2017年11月11日 | by 優

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple API Form Ajax</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
        $("#submit").click(function()
        {
                var falseFlag = 0;

                if( document.getElementById('yourName').value == '' )
                {
                        falseFlag = 1;
                }

                if( document.getElementById('email').value == '' )
                {
                        falseFlag = 1;
                }

                if( document.getElementById('goiken').value == '' )
                {
                        falseFlag = 1;
                }

                if(falseFlag == 1)
                {
                        window.alert("未入力の項目がありますよ！");
                        return false;
                }

                $.ajax({
                        url: 'api.php',
                        type: 'post',
                        dataType: 'json',
                        data: {
                                yourName : $('#yourName').val(),
                                email    : $('#email').val(),
                                goiken   : $('#goiken').val()
                        },
                })
                .done(function(response){
                        // フォームデータ表示の削除
                        $('#yourName').val('');
                        $('#email').val('');
                        $('#goiken').val('');

                        // APIに返されたデータを受け取り表示する
                        $('#result').append(response.data);


                        $('#message').append('<strong style="color : green;">ご応募有難う御座います。<strong>');
                })
                .fail(function(){
                        $('#message').append('<strong style="color : red;">送信に失敗しました。時間を置いてもう一度お試し下さい。</strong>');
                })

        });
});
</script>

<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }


</style>
</head>
<body>
        <lable>お名前</label>
        <input type="text" id="yourName" name="yourName" value=""><br/>
        <lable>メールアドレス</label>
        <input type="text" id="email" name="email" value=""><br/>
        <lable>ご意見</label>
        <textarea id="goiken" name="goiken" value=""></textarea><br/>
        <input type="button" id="submit" value="送信"><br/>

        <div id="result" value=""></div>
        <div id="message"></div>
</body>
</html>

api.php

<?php
// API
header('Content-Type: application/json');
$data = "{$_POST['yourName']}さん({$_POST['email']}) ご意見<hr/>{$_POST['goiken']}<hr/>";
echo json_encode( compact('data') );


// メール送信
mb_language("Japanese");
mb_internal_encoding("UTF-8");
$to      = 'kanehiro@sys-guard.com';
$subject = 'アンケートフォーム';

$message = "
お名前：{$_POST['yourName']}さん
メールアドレス：{$_POST['email']}
ご意見:{$_POST['goiken']}
";

$headers = 'From: from@hoge.co.jp' . "\r\n";
mb_send_mail($to, $subject, $message, $headers);

コメントを残すコメントをキャンセル