jQuery | 優技録

DEMO index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 complete</title>
<link rel="stylesheet" href="css/styles.css">
<!--[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(){
        $('#button').click(function(){
                $.get('api.php', {
                        name   : $('#name').val(),
                        email  : $('#email').val(),
                        goiken : $('#goiken').val(),
                }, function(data){
                        $('#result').html(data.message);
                });
        });

});
</script>

<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<label>お名前</label>
<input type="text" id="name" name="name" value=""><br/>
<label>Eメールアドレス</label>
<input type="text" id="email" name="email" value=""><br/>
<label>ご意見</label>
<textarea id="goiken" name="goiken" value=""></textarea><br/>

<hr/>
<button id="button">Ajax</button>

<p id="result"></p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>HTML 5 complete</title>

<!--[if IE]>

<![endif]-->

$(function(){

$('#button').click(function(){

$.get('api.php', {

name : $('#name').val(),

email : $('#email').val(),

goiken : $('#goiken').val(),

}, function(data){

$('#result').html(data.message);

});

</script>

<style>

article, aside, dialog, figure, footer, header,

hgroup, menu, nav, section { display: block; }

</style>

</head>

<body>

<label>Eメールアドレス</label>

<hr/>

</body>

</html>

api.php

<?php

$ret = array(
                "name"      => htmlspecialchars("{$_GET['name']}", ENT_QUOTES, "utf-8"),
                "email"     => htmlspecialchars("{$_GET['email']}", ENT_QUOTES, "utf-8"),
                "goiken"    => htmlspecialchars("{$_GET['goiken']}", ENT_QUOTES, "utf-8"),
                "message"   => htmlspecialchars("お名前：{$_GET['name']}, Email:{$_GET['email']}, ご意見:{$_GET['goiken']}", ENT_QUOTES, "utf-8")
       );

header( 'Content-Type: application/json; charset=utf-8' );
echo json_encode( $ret );

<?php

$ret = array(

"name" => htmlspecialchars("{$_GET['name']}", ENT_QUOTES, "utf-8"),

"email" => htmlspecialchars("{$_GET['email']}", ENT_QUOTES, "utf-8"),

"goiken" => htmlspecialchars("{$_GET['goiken']}", ENT_QUOTES, "utf-8"),

"message" => htmlspecialchars("お名前：{$_GET['name']}, Email:{$_GET['email']}, ご意見:{$_GET['goiken']}", ENT_QUOTES, "utf-8")

);

header( 'Content-Type: application/json; charset=utf-8' );

echo json_encode( $ret );

の続きを読む

DEMO 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>

<!DOCTYPE html>

<html>

<head>

<title>Simple API Form Ajax</title>

<!--[if IE]>

<![endif]-->

$(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>

</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);

<?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);

の続きを読む

優技録

タグ: jQuery

Ajax jQuery 基本フォーム処理

シンプルフォームAPI